#

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 { ComponentOnInit } 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 { ComponentOnInit } 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 {FormsModulefrom '@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 { }

 

 

 

Mobile

.