สร้าง component ใหม่

angular มีคำสั่งช่วยสร้าง component มาให้แล้ว

ถ้ารันเว็บอยู่ขอให้ทำการกด ctrl + c เพื่อหยุดการทำงานก่อน

จากนั้นพิมพ์คำสั่ง

>\ng generate component my-component

คำสั่งนี้จะทำการสร้างไฟล์ต่างขึ้นมาให้ เหมือนกับ app.component

ลองเปิดไปที่ src/app/app.module.ts จะพบว่า my-component ถูกเพิ่มเข้ามา

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

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

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

ที่ไฟล์ src/app/my-component/my-component.component.ts จะพบว่า selector ชื่อ app-my-selector

ลองนำไปใส่ใน src/app/app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>
<app-my-component></app-my-component>

ในหน้าเว็บ จะพบข้อความ my-component works! ก็คือมาจาก template ที่อยู่ในไฟล์ src/app/my-component/my-component.component.html นั่นเอง