Create Component and Update Routing of 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>

<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:

<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,500"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>