Saya akan menunjukkan contoh angular 10 buat komponen baru. Saya akan menunjukkan kepada Anda tentang membuat komponen di angular 10. saya menjelaskan secara sederhana langkah demi langkah contoh komponen menghasilkan angular 10. jika Anda memiliki pertanyaan tentang bagaimana menghasilkan komponen di angular 10 maka saya akan memberikan contoh sederhana dengan solusi.

Dalam posting ini, saya akan memberi tahu Anda cara membuat komponnet dalam aplikasi angular 10. kami akan menggunakan ng menghasilkan perintah komponen.

Jadi pada dasarnya, ketika Anda membuat komponen menggunakan perintah angular cli maka mereka akan membuat folder baru dengan empat file dan juga mereka akan mendaftar di file moduler.ts.

Dalam contoh ini, kita akan menjalankan perintah dan mari kita lihat file mana yang dibuat dan apa yang harus Anda tulis pada kode file itu. Anda dapat dengan mudah memahami untuk menghasilkan komponen baru dalam aplikasi angular 10.

Buat Aplikasi Baru:

Jika Anda ingin mengujinya dari awal cara membuat komponen dalam aplikasi angular, maka Anda dapat menjalankan perintah berikut untuk mengunduh aplikasi baru:

ng new MedikreApp

Sekarang di aplikasi itu Anda dapat membuat komponen baru menggunakan perintah berikut:

ng g c favorite

Sekarang Anda bisa melihatnya akan menghasilkan file baru seperti di bawah screen shot:

Sekarang menghasilkan komponen baru dalam aplikasi angular 10. Anda dapat melihat pada file berikut:

app/favorite/favorite.component.html

Anda dapat menulis kode HTML:

<p>favorite works!</p>

app/favorite/favorite.component.css

Anda dapat menulis kode CSS:

p{ color:red }

app/favorite/favorite.component.ts

Anda dapat menulis kode Core Logic:

import { Component, OnInit } from '@angular/core';
   
@Component({
  selector: 'app-favorite',
  templateUrl: './favorite.component.html',
  styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {
  
  constructor() { }
  
  ngOnInit() {
  }
   
}

Oke, sekarang Anda bisa mengerti apa yang harus Anda tulis di file mana.

Anda juga dapat melihat mereka menambahkan FavouriteComponent secara otomatis di bagian deklarasi file module.ts. seperti di bawah ini:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FavoriteComponent } from './favorite/favorite.component';
@NgModule({
  declarations: [
    AppComponent,
    FavoriteComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Sekarang Anda dapat menggunakan FavouriteComponent dalam file tampilan Anda seperti di bawah ini:

<app-favorite></app-favorite>

Anda juga dapat membuat komponen baru di dalam beberapa direktori. Anda dapat mencoba perintah di bawah ini:

ng g c admin/users

Saya harap ini dapat membantu Anda ...