Angular 6 Templating
Let's say for instance that we want our particular app to have a sidebar with some icons. This sidebar will always be present in the app. The sidebar component is something we already generated with the CLI.Open the src/app/app.component.html file. You will see all of the boilerplate HTML the CLI generated, and consequently, what you see in the browser for the time being. Remove all of that and paste this (or better yet, type it!):
<div id="container">
<app-sidebar></app-sidebar>
<div id="content">
<router-outlet></router-outlet>
</div>
</div>Well, when the CLI generated the sidebar component, it made the component's selector value app-sidebar. Don't believe me? Check out /src/app/sidebar/sidebar.component.ts -- It's right there in the component decorator! That's how you embed a component inside of another component. Now, anything defined in that component's HTML, will be displayed where <app-sidebar></app-sidebar> is defined.
Another very important element is the router-outlet. This was added by the CLI when we added the --routing flag (it also generated a routing file in /src/app.
This element defines where any components defined by their routes will be displayed.
Let's head over to the /src/app/sidebar/sidebar.component.html file to define the sidebar templating:
<nav>
<ul>
<li>
<a routerLink="">
<i class="material-icons">supervised_user_circle</i>
</a>
</li>
<li>
<a routerLink="posts">
<i class="material-icons">message</i>
</a>
</li>
</ul>
</nav>We're also going to use Material Icons, so we need to import that first.
Save this file and open up /src/index.html and add the following 2 lines between the <head> tags:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,700" rel="stylesheet">
Angular 6 Templating
![Angular 6 Templating]()
Reviewed by Pakainfo
on
August 08, 2018
Rating:
No comments: