スキップしてメイン コンテンツに移動

Create pages with Angular 2

Create pages with Angular

Create pages with Angular 1

Create child components

I could add a child component to top-page component like below.
ng g component top-page/product-ranking
product-ranking folder was made under the top-page folder.

src
L app
L top-page
L product-ranking
L product-ranking.component.css
...

Base size

I thought, the important thing was the base size of component was affected by the parent component.
Although there had been some parent elements, the child component's size ignored them.

For example, I generated two components on the same directory, and made parent-child relationship by HTML template.

src
L app
L top-page
L product-ranking // component
L product-ranking-block // component
L product-cell // component

product-ranking.component.html


<div id="product-ranking-area">
    <div id="product-ranking-frame">
        <div id="product-ranking-group">
            <app-product-ranking-block></app-product-ranking-block>
        </div>
    </div>
</div>

product-ranking-block.component.html


<div class="product-ranking-block" style="width:100%; height:100%;">
  <div class="product-ranking-block">
    <app-product-cell class="product-cell"></app-product-cell>
  </div>
</div>

product-cell.component.html


<div id="product-cell-frame" style="width:100%; height:100%;">
</div>

product-ranking-block class element's size and product-cell-frame class element's one were same.
So I thought the best way was making file structures same as the HTML template structure.


Use Pikaday

Because I wanted to use Datepicker.
If I could only support Chrome and Firefox, I could use input type=date.
But IE11 didn't support it, so I had used Pikaday.
Pikaday - GitHub: A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS

Maybe I should use other Datepicker what was made for Angular.
But because I had already used Pikaday, so I tried this time.

Install

I installed Pikaday and moment.js.
npm install --save moment pikaday @types/pikaday

When I had used Pikaday with no JS framework, I had to added Pikaday.js and Pikaday.css.
About Pikaday.js, I just imported from using Datepicker component class.

top-page.component.ts


import { Component, OnInit } from '@angular/core';
import * as Pikaday from 'pikaday';
...
export class TopPageComponent implements OnInit {
...
  ngOnInit() {
    let picker = new Pikaday({ 
      field: document.getElementById('datepicker') 
    });
  }
}

top-page.component.html


<input type="text" id="datepicker">

<app-product-ranking></app-product-ranking>

But how about CSS?
After I tried, I decided import it from style.css.

style.css


@import '../node_modules/pikaday/css/pikaday.css';
...


Customize view

I wanted to localization, and some customizing.

top-page.component.ts


import { Component, OnInit } from '@angular/core';
import { CustomDatePicker } from '../custom-datepicker';
...
export class TopPageComponent implements OnInit {
...
  ngOnInit() {
    let picker = CustomDatePicker.getPikaday('datepicker');
  }
}

custom-datepicker


import * as Pikaday from 'pikaday';
import * as moment from 'moment';

export class CustomDatePicker{
    public static getPikaday(elementName: string): Pikaday{
        const today = new Date();
        const yearTo = today.getFullYear() + 1;

        return new Pikaday({
            field: document.getElementById(elementName),
            firstDay: 1, // start from Monday
            minDate: new Date(moment(today).format("YYYY-MM-DD")), // from today
            maxDate: new Date(`${yearTo}-12-31`), // to after one year
            yearRange: [today.getFullYear(), yearTo],
            yearSuffix: '年', // show like "2019年"
            showMonthAfterYear: true, // show like "2019年 四月"
            /* localize to Japanese */
            i18n: {
                previousMonth : '前月',
                nextMonth     : '次月',
                months        : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                weekdays      : ['日曜','月曜','火曜','水曜','木曜','金曜','土曜'],
                weekdaysShort : ['日','月','火','水','木','金','土'],
            }
        })
    }
}
https://github.com/Pikaday/Pikaday/blob/master/pikaday.js

Data bindings

Because I used Angular, I wanted to use Data bindings.

top-page.component.html


<input type="text" id="datepicker" [(ngModel)]="dateText">
<div>{{dateText}}</div>

<app-product-ranking></app-product-ranking>

top-page.component.ts


import { Component, OnInit } from '@angular/core';
import { CustomDatePicker } from '../custom-datepicker';
...
export class TopPageComponent implements OnInit {
  dateText: string = "";

...
  ngOnInit() {
    let picker = CustomDatePicker.getPikaday('datepicker');
  }
}

But I got nothing.
If I input some words directory in the textbox, Data bindings worked.

Because the change event could fire, so I could manually resolve it.

top-page.component.html


<input type="text" id="datepicker" (change)="onValueChanged()">
<div>{{dateText}}</div>

<app-product-ranking></app-product-ranking>

top-page.component.ts


import { Component, OnInit } from '@angular/core';
import { CustomDatePicker } from '../custom-datepicker';
...
export class TopPageComponent implements OnInit {
  dateText: string = "";
...
  ngOnInit() {
    let picker = CustomDatePicker.getPikaday('datepicker');
  }
  
  onValueChanged(){
    let inputText = document.getElementById('datepicker') as HTMLInputElement;
    this.dateText = inputText.value;
  }
}

But why the Data bindings wasn't work?
Next time, I will search the reason.
ラベル:

コメント

コメントを投稿

このブログの人気の投稿

[Angular][ASP.NET Core] Upload chunked files

Intro I wanted to send files to Web application (made by ASP.NET Core). If the file size had been small, I didn't need do any special things. But when I tried to send a large file, the error was occurred by ASP.NET Core's limitation. Though I could change the settings, but I didn't want to do that, because I hadn't known the file sizes what would been actually using. So I splitted the data into chunks first, and sent them. After receiving all chunks, I merged them into one file. There might be some libraries or APIs (ex. Stream API) what did them automatically, but I couldn't find them. What I did [ASP.NET Core] Make CORS enabled [Angular] Split a large file into chunks [Angular][ASP.NET Core] Send and receive data as form data [ASP.NET Core] Merge chunks into one file [ASP.NET Core] Make CORS enabled Because the client side application(Angular) and the server side application(ASP.NET Core) had been separated, I had to make CORS(Cross-Origin Requests) ...
コメントを投稿
続きを読む

[Nest.js] Show static files

Intro I wanted to use Nest.js and WebRTC(node-webrtc). NestJS - A progressive Node.js framework Documentation | NestJS - A progressive Node.js framework And because I wanted to try with simple page(not use JavaScript frameworks), I added static HTML, CSS, JavaScript into a Nest.js project. Prepare Install First, I installed @nestjs/cli. First steps | NestJS - A progressive Node.js framework As same as last time , I couldn't do global install because I had used Volta. But I could installed by volta. volta install @nestjs/cli Create project nest new nest-web-rtc-sample volta pin node@12 Run npm start After doing "npm start", I could getting "Hello World!" from http://localhost:3000. Add static files I could add static files by two ways. @nestjs/serve-static First one of them was using "serve-static". Serve Static | NestJS - A progressive Node.js framework npm install --save @nestjs/serve-static And I needed adding a module into app.modu...
コメントを投稿
続きを読む

[Angular] Sending file with Observable and showing loading screen

Intro When I tried sending file data on last time, I had confused with "promise.then", "async/await" and "Observable". [Angular][ASP.NET Core] Upload chunked files So I wanted to distinct them, and this time, I tried to use "Observable" because HttpClient return Observable<any>. Call observables in order I sended file in these steps. Read file by FileReader Create directory for saving chunks send and saving chunks merge chunks to one file and delete chunks Each steps used the former steps result. So I could write by Promise.then like below. this.executeStep1() // return Promise<UploadResult> .then(result => this.executeStep2(result)) // return Promise<UploadResult> .then(result => this.executeStep3(result)) // return Promise<UploadResult> .catch(reason => console.log(reason)); Result I could write with pipe & flatMap. file-uploader.service.ts public upload(file: File): Observable<U...
コメントを投稿
続きを読む