Zum Erstellen einer eigenen funktionellen Angular Komponente muss man nur einen Ordner anlegen, dort die .component.html und eine .component.ts Datei ablegen und diese dann in der .module.ts Datei registieren und in app.html als Tag eintragen
Im Microsoft als Control
.component.ts
In der .component.ts findet man den Verweis zur .html Ausgabe und den html Name unter selector:
Zusätzlich unter export class findet man die Bezeichnung, welche in die Module.ts eingetragen wird.
import { Component } from "@angular/core";
@Component({ selector: 'list1', templateUrl: 'list1.component.html' })
export class List1Component {
} |
Component.html
Die component.html enthält nur den Ausgabe Code
<br> Das ist meine 1.Angular Componente |
Einbinden in einer anderen Komponente
In der andern .html Datei wird die untergeordnete Komponente in Tags eingebunden mit der Selector Bezeichnung
Hier <list1></list1>
Demo Angular Component <br> <list1></list1> |
Hierzu muss die Komponente auch in der module.ts registiert werden im Bereich
NgModule({
declarations: [
AppComponent,
List1Component
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import {FormsModule} from '@angular/forms'
import { AppComponent } from './app.component'; import { List1Component } from './components/list1/list1.component';
@NgModule({ declarations: [ AppComponent, List1Component ], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |