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 { }