How to set up Angular environment
How to generate component and define routings in Angular
Let’s make our app little bit interactive.
You can put all your common style of your application to
style.css file which applies globally.
Copy and paste below code in your style.css file
/* You can add global styles to this file, and also import
other style files */
@import
url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap');
$primary:
rgb(216, 172, 78);
body {
margin: 0;
font-family: 'Nunito', 'sans-serif';
font-size: 18px;
}
.container
{
width: 80%;
margin: 0 auto;
}
header {
background: $primary;
padding: 1em 0;
a {
color: white;
text-decoration: none;
}
a.logo {
font-weight: bold;
}
nav {
float: right;
ul {
list-style-type: none;
margin: 0;
display: flex;
li a {
padding: 1em;
&:hover {
background:
darken($primary, 10%);
}
}
}
}
}
h1 {
margin-top: 2em;
}
Copy and paste below code in your app.component.html
<header>
<div class="container">
<a href=""
class="logo">My flower shop</a>
<nav>
<ul>
<li><a href=""
routerLink="/">Landing</a></li>
<li><a href=""
routerLink="/home">Home</a></li>
</ul>
</nav>
</div>
</header>
<div
class="container">
<router-outlet></router-outlet>
</div>
Copy paste below code in your landing.component.html file
<h1>Welcome
to my flower store</h1>
That is all. Now you
will see your app as below.
 |
| Welcome to my flower store page |
Posts
No comments:
Post a Comment