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: Root Platzhalter für Components

18.12.2020 (👁240)

Angular: Root Platzhalter für Componenten

 

 

 

Index.html

In der Index.html steht der Platzhalter

<app-root></app-root>

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>MyApp02</title>

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>

<body>

  <app-root></app-root>

</body>

</html>

 

 

App.compontent.ts ->Component->Selector

In der .ts Datei der componente steht der Name der Componente, welche eingesetzt wird

@Component({

  selector: 'app-root',

Das bedeutet, dass diese Komponente in den Platzhalter der .html Datei eingefügt wird

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  

    title = 'Raimund 1222';

}

 

 

 

app.module.ts ->bootstrap

Bootstap wird in der datei module.ts auf die Komponente zugewiesen

Die Zeile export class AppModule wird dann in die main.ts übergeben

platformBrowserDynamic().bootstrapModule(AppModule)

Die app.module.ts  (.ts typescript Datei)

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import {FormsModulefrom '@angular/forms'

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }