Angular 5 Template & Styling Tutorial

Defining a Template
Open up the /src/app/home/home.component.ts file that the CLI generated earlier:

[php]
@Component({
selector: ‘app-home’,
templateUrl: ‘./home.component.html’,
styleUrls: [‘./home.component.scss’]
})
[/php]

Notice templateUrl? This is a property that expects an external HTML file that will serve as the template for this component.

If you change it to the template, you can specify inline HTML like below:

[php]

@Component({
selector: ‘app-home’,
template: `This is my inline template HTML!`,
styleUrls: [‘./home.component.scss’]
})
[/php]

We don’t want an inline template, so make sure you switch back to using the default templateUrl property.

Throughout this course, we are going to keep building on the same project where you can specify a list of life goals (a bucket list, in other words). Let’s define the core template HTML that makes this app actually work.

Open up the home.component.html file and paste the following HTML:

[html]
<div class="container color-dark">
<div class="col">Add a bucket list item</div>
<div class="col">Your bucket list</div>
</div>
<div class="container color-light">
<div class="col">
<p class="sm">Use this form below to add a new bucket list goal.
What do you want to accomplish in your life?</p>
<form><input class="txt" name="item" type="text" placeholder="Life goal.." />
<input class="btn" type="submit" value="Add Item" /></form></div>
<div class="col">
<p class="life-container">I want to climb a mountain</p>
</div>
</div>
[/html]

Right now, everything is static. We aren’t using any type of bindings or directives, but we will a little bit later on down the road.

At this point, we’re only interested in establishing the basic HTML structure so that we can use CSS to make it look presentable.

Defining CSS Styling
Each component gives you the ability to specify inline and external CSS styling to the component template.

Open up the /src/app/home/home.component.ts file once again and note the property for external style URL’s:

[php]
@Component({
selector: ‘app-home’,
templateUrl: ‘./home.component.html’,
styleUrls: [‘./home.component.scss’]
})
[/php]

As with templates, you can change styleUrls to styles to define inline CSS:

[js]
@Component({
selector: ‘app-home’,
templateUrl: ‘./home.component.html’,
styles: [`p { font-weight: bold; } div { color: gray; }`]})
[/js]

We don’t want inline CSS, so make sure you revert back to styleUrls.

Each of these component style files applies to the actual component HTML. There also exists a global styles file that we can apply CSS rulesets to.

Open up /src/styles.scss and paste in the following rulesets:

[css]
@import url(‘https://fonts.googleapis.com/css?family=Raleway:300,700’);

body {
background:#2E9CE6;
padding: 3em;
font-family: ‘Raleway’, ‘Arial’;
color:#fff;
}
ul {
list-style-type:none;
margin:0 0 2em 0;
padding:0;
}
ul li {
display:inline;
margin-right: 30px;
}
ul li a {
font-size: 1.5em;
}
a {
color:#fff;
text-decoration:none;
}
Here, we’re just defining some global CSS that we want applied to all components.

Next, open up /src/app/home/home.component.scss and paste the following rulesets:

.container {
display: grid;
grid-template-columns: 50% auto;
}
.col {
padding: .4em 1.3em;
}
.color-dark {
background: #2885C4;
}
.color-light {
background: #57B3F1;
}

input.txt {
border: 0;
padding: 1em;
width: 80%;
margin-bottom: 2em;
}
input.btn {
border: 0;
display:block;
padding:1em 3em;
background:#A5F883;
color:#003A61;
margin-bottom:1em;
cursor:pointer;
}
.life-container {
background:#3FA0E1;
padding:.5em;
font-weight:bold;
cursor:pointer;
}
[/css]

Add a Comment

Your email address will not be published. Required fields are marked *