Angular: Component mit Angular CLI erstellen
Eine Angular Componente kann man automatisch erstellen mit dem Angular CLI Befehl
ng generate component ordername/componentenname |
Oder
ng g c ordername/componentenname |
Hier eine automatisch erstelle List Komponente, welche folgende einzelne ListElemente einfügt
import { Component, OnInit } from '@angular/core';
@Component({ selector: 'app-liste', templateUrl: './liste.component.html', styleUrls: ['./liste.component.css'] }) export class ListeComponent implements OnInit {
constructor() { }
ngOnInit(): void { }
} |
Hier werden die einzelnen Teilkomponenten einfach in der .html Seite eingefügt
Die liste.component.html
<p>liste</p>
<br> Element 1
<listElement></listElement>
<br> Element 2 <listElement></listElement> |
TypeScript Seite automatisch erzeugt
Mit der Typescript Codebehind Seite
import { Component, OnInit } from '@angular/core';
@Component({ selector: 'app-liste', templateUrl: './liste.component.html', styleUrls: ['./liste.component.css'] }) export class ListeComponent implements OnInit {
constructor() { }
ngOnInit(): void { }
} |
Die Einzelelemente bleiben wie zuvor
src\app\components\listElement\listElement.component.ts
import { Component } from "@angular/core";
@Component({ selector: 'listElement', templateUrl: './listElement.component.html' })
export class ListElementComponent {
} |
Parent Element in App
App.Component.html ->Parent
In der app.component.html muss man nur noch das parent Element eintragen
Demo Angular Component <br> <app-liste></app-liste>
|
Registrieren der Komponenten Module
Elemente in App deklarieren
In der App Module Datei muss man dann beide Komponenten als Module declarieren
src\app\app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import {FormsModule} from '@angular/forms'
import { AppComponent } from './app.component'; import { ListElementComponent } from './components/listElement/listElement.component'; import { ListeComponent } from './components/liste/liste.component';
@NgModule({ declarations: [ AppComponent, ListElementComponent, ListeComponent ], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
|