Читать книгу Angular - Manfred Steyer - Страница 66

Nachdem wir nun eine erste eigene Komponente geschaffen haben, müssen wir sie nur noch in unsere Anwendung einbinden. Damit die Angular-Anwendung unsere Komponente überhaupt berücksichtigen kann, muss sie in einem Angular-Modul deklariert werden. In unserem Fall handelt es sich dabei um das AppModule.

Diese Aufgabe sollte die CLI beim Generieren der Komponente schon übernommen haben. Aber zur Sicherheit lohnt es sich, das zu überprüfen. Öffnen Sie dazu die Datei app.module.ts und vergewissern Sie sich, dass die FlightSearchComponent unter declarations eingetragen ist (siehe Beispiel 3-12).

Beispiel 3-12: Die FlightSearchComponent muss im AppModule deklariert werden.

// src/app/app.module.ts

[...]

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

[...]

@NgModule({

imports: [

FormsModule,

HttpClientModule,

BrowserModule

],

declarations: [

AppComponent,

SidebarComponent,

NavbarComponent,

// Unsere Komponente:

FlightSearchComponent

],

providers: [],

bootstrap: [

AppComponent

]

})

export class AppModule { }

Danach können wir die Komponente im Template der AppComponent aufrufen (siehe Beispiel 3-13).

Beispiel 3-13: Aufruf der FlightSearchComponent im Template der AppComponent

<div class="wrapper">

<div class="sidebar" data-color="white" data-active-color="danger">

<app-sidebar-cmp></app-sidebar-cmp>

</div>

<div class="main-panel">

<app-navbar-cmp></app-navbar-cmp>

<div class="content">

<!-- Alt: -->

<!-- <h1>{{title}}</h1> -->

<!-- Diese Zeile einfügen: -->

<app-flight-search></app-flight-search>

</div>

</div>

</div>