Trong phần này chúng ta sẽ tìm hiểu cách tạo một Component.

Đầu tiên bạn tạo một project như bình thường, có thể dùng project quickstart cũng được, và bạn đặt tên là gì cũng được, chạy project này như bình thường và được tương tự như hình dưới.

Tạo component

Chúng ta đã biết Component là một lớp và có phần khai báo @Component ở trước phần định nghĩa lớp đó, khi tạo một project Angular thì một module có thể có nhiều component dùng hiển thị các chức năng khác nhau.

Bây giờ chúng ta tạo một file có tên new.component.ts trong thư mục src/app với nội dung như sau:

import { Component } from '@angular/core';

@Component({
    selector: 'my-component',
    template: `
        <h2>Testing</h2>
    `
})
export class MyComponent{ 

}

Đây là một lớp component bình thường như bao lớp khác, ở đây chúng ta đặt tên selector là my-component. Lưu ý thường chúng ta đặt tên file có đuôi là *.component.ts cho dễ quản lý.

Để sử dụng component mới này thì chúng ta chỉ cần gọi selector của lớp đó trong template của lớp AppComponent là được, chúng ta sửa lại file app.component.ts như sau:

import { Component } from '@angular/core';
import { MyComponent} from './my.component';

@Component({
    selector: 'my-app',
    template: `        
        <h1>Testing npm</h1>
        <my-component>Loading</my-component>
    `
})
export class AppComponent { name = 'Angular'; }

Trong tham số template, chúng ta chỉ cần khai báo thêm selector của lớp MyComponent là <my-component></my-component>, giữa 2 thẻ này có thể để trống.

Ở đầu file chúng ta phải import lớp MyComponent, nếu không Angular sẽ báo lỗi.

Cuối cùng chúng ta phải khai báo lớp MyComponent này trong AppModule nữa thì mới hiển thị được, chúng ta sửa lại file app.module.ts như sau:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { MyComponent } from './my.component';

@NgModule({
    imports: [ BrowserModule ],
    declarations: [ AppComponent, MyComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

Chúng ta chỉ cần thêm dòng import và khai báo trong mảng declarations là xong.