Create Component and Update Routing of Application

Let's create a component using the Angular CLI and see how we can change the routing of our application.

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 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" />

Get hands-on with 1200+ tech skills courses.