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

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] Use WebSocket with ws

Intro Until last time , I had used node-web-rtc to try WebRTC. But because the example was a little complicated for I understood the core functions of using WebRTC. So I look for other frameworks or libraries. PeerJS is a famous library for WebRTC. peers/peerjs: Peer-to-peer data in the browser. - GitHub peers/peerjs-server: Server for PeerJS - GitHub PeerJS - Simple peer-to-peer with WebRTC A problem is I don't know how to integrate to the Nest.js project. I couldn't find examples. So I don't choose at least this time. What shall I choose? According MDN, WebRTC doesn't specify strictly what technology is used on server application for connecting two devices. Signaling and video calling - Web APIs | MDN But in many examples include MDN's one use WebSocket. samples-server/s/webrtc-from-chat at master · mdn/samples-server · GitHub So I try WebSocket in the Nest.js project. Use WebSocket in a Nest.js project Nest.js has a function for using We
コメントを投稿
続きを読む

[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
コメントを投稿
続きを読む