Create Application Layout with Components in an Angular CLI Project
In this lesson we will our UiModule, that has a LayoutComponent, HeaderComponent and FooterComponent.
We generate UiModule by running the following command:
ng generate module ui --module app
This generates the new module and imports it in our AppModule.
We'll create the LayoutComponent using:
ng generate component ui/containers/layout
ng generate component ui/containers/header
ng generate component ui/containers/footer
We update our AppRoutingModule and add this component to our first route to make it visible.
The HeaderComponent and FooterComponent are referenced in the LayoutComponent and we implement the actual templates!
Instructor: [00:03] We run ngGenerateModuleUI and pass in --module app. We see that the module gets generated and imported by our app module. Now inside this module, we're going to create three components to build out our UI -- the layout, header, and footer components.
[00:18] Let's open our app routing module to add our first route. This is an object literal with the path property set to an empty string and the component property references layout component. We now see that our app renders the layout components.
[00:32] We open appComponent.ts and remove everything from the styles array and the template property, except the router outlet element. We open our layout component and add our app header to the template.
[00:44] Next, we add a div with the class container, MB5 and PB5 to add some spacing. Inside the div, we add the router outlet component. Lastly, we add an app footer.
[00:56] When we save the page, we see that TypeScript got mad at us. It tells us that router outlet is not a known element. In order to fix this, we open UI module and add router module to the import array. Let's quickly head over to Angular IO/press kit to download the Angular logo in SVG, and store it in our folder source assets, with the name logo.svg.
[01:18] Now that we have the logo, we open header component, and add three properties in the component class button. Logo, set to assets/logo.svg, title, set to store, and our links, set to an array with one entry, the property labeled product, and the URL set to /products.
[01:39] We clear out the template, and start by adding a nav tag with the class as navbar, navbar.expand, navbar dark, BG dark, and fixed top. Inside our nav element, we add an a tag with the class navbar that's brand. We change the href property to a router link and set its value to a forward slash.
[01:58] The content of the a tag will be an image, with the property hdr.src set to logo, hdr.alt set to title, and width and height set to 30. After the image, we add a title property in double curly braces.
[02:12] Below our a tag, we'll create a div with the class as collapse and navbar collapse. Inside this div, we add another div with the navbar-nav class.
[02:19] Lastly, we add an a tag with the nav item and nav link classes. We use the ngFor directive on the a tag to loop over the items in our links array. Content of the a tag is set to link.label, double curly braces, and we add a router link directive in square brackets, and set its value to linked URL.
[02:39] We set router link active to active, then we add the router link active options in square brackets, and assign the value to an object with the key exact set to true. We open the footer component, and clear the content of the template.
[02:53] We add a nav tag with the class as navbar, navbar expands, navbar dark, BG dark, and fixed bottom. Inside our nav element, we add a div tag with the class as set to navbar text, -auto to center the content, and text white for some better contrast. Inside our div, we place our footer tag -- just a simple copyright message.