Bootstrap 4 Layouts in Depth/

...

/

Inspecting the App Folder

Inspecting the App Folder

Inspect the files inside the app folder.

We'll cover the following...

Inspecting the app/ folder

The app.module.ts file

Now, let’s see what’s going on inside the app.module.ts file. 

Press + to interact
import{NgModule}from'@angular/core'; 
import{BrowserModule}from'@angular/platform-browser'; 
import{FormsModule}from'@angular/forms';
import{AppComponent}from'./app.component'; 
import{NavbarComponent}from'./navbar/navbar.component';
@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, NavbarComponent ],
  bootstrap:    [ AppComponent ]
}) 
export class AppModule{}

Explanation

  • Lines 1–3: We import some basic functionality that does Angular work. We don't need to focus on that now.

  • Lines 4–5: We import AppComponent and NavbarComponent. These class names were exported from the app.component.ts and navbar/navbar.component.ts files, respectively.

  • Lines 6–10: We specify the module’s metadata in its @NgModule decorator. It is similar to what we discussed earlier when we saw how the @Component decorator ...