Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Angular: Component mit Angular CLI erstellen

18.12.2020 (👁2907)

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