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