Search⌘ K
AI Features
Home
Courses
The Angular Masterclass

Create Component and Update Routing of Application

Explore how to create a new Angular component and update your application's routing module to enable navigation to different views. This lesson guides you through template and style updates, component creation using Angular CLI, and setting up routes, including default routing to the client page component.

We'll cover the following...

Update template and styling of the application

Before creating a new component for our application we will make the following changes:

First you need to replace the code in the app.component.html with the following:

<div style="text-align:center">
  <h1>Welcome to {{ title }}!</h1>
</div>

<div class="container"><router-outlet></router-outlet></div>

Now, update app.component.scss with the following code:

.container {
  padding: 20px;
}

Update styles.scss with the following code:

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

Also, update index.html to this:

Client Contacts Manager 
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,
...