ساخت Component: ایجاد اولین کامپوننت 🏗️

بیایید یک کامپوننت جدید بسازیم تا با فرآیند کار آشنا شویم. ما می‌خواهیم یک کامپوننت برای نمایش "لیست سرورها" بسازیم.

استفاده از CLI:

سریع‌ترین و بهترین راه برای ساخت کامپوننت، استفاده از Angular CLI است. دستور زیر را در ترمینال (در پوشه پروژه) اجرا کنید:

ng generate component servers
# یا به صورت خلاصه:
ng g c servers

این دستور ۴ کار انجام می‌دهد:

1. یک پوشه جدید به نام servers در src/app/ می‌سازد.
2. ۴ فایل (HTML, CSS, TS, Spec) را درون آن پوشه تولید می‌کند.
3. فایل app.module.ts را آپدیت می‌کند تا کامپوننت جدید را بشناسد (Declaration).

بررسی کامپوننت جدید:

به فایل src/app/servers/servers.component.ts بروید. باید چیزی شبیه این ببینید:

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

@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css']
})
export class ServersComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

selector ما app-servers است.

استفاده از کامپوننت:

برای نمایش این کامپوننت، باید تگ آن را در کامپوننت پدر (معمولاً app.component.html) قرار دهیم.

فایل src/app/app.component.html را باز کنید و کد زیر را اضافه کنید:

Hello Angular!
<hr>
<app-servers></app-servers>

حالا اگر مرورگر را چک کنید، باید متن "servers works!" (که محتوای پیش‌فرض فایل HTML کامپوننت جدید است) را ببینید.