Introduction
In my last article, we've finished setting up the development enviroment (Develop Angular2 Application using Visual Studio Code - 1). This time, let's try to change something based on the auto generated source code. I will do this step by step. You may take 2 hours to finish this.
Background
If you didn't setup your Angular2 development enviroment, please see Develop Angular2 Application using Visual Stuido Code - 1. You may need to change your package.json file and npm install the newest version if you are using your own development enviroment.
Steps
1. Generate Some Code using angular-cli
ng generate component menu OR ng g c menu
ng generate component feed OR ng g c feed
After generation, you can find the generated source code in Visual Studio Code explorer.
Then open C:\Users\ngudeveloper\NgTweet\src\app\app.component.html
Change code to:
<app-menu></app-menu>
<app-feed></app-feed>
npm start the web server. Now, you will see "feed works!" "menu works!" in the browser.
2. Use bootstrap
We are going to use bootstrap4 Alpha. So this step, add the Bootstrap CDN blow to C:\Users\{user}\NgTweet\src\index.html. You can find them on the first page of bootstrap4 website.
<link crossorigin="anonymous"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"
integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK"
crossorigin="anonymous"></script>
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>NgTweet</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"
crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"
integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK"
crossorigin="anonymous"></script>
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
3. Open C:\Users\{user}\NgTweet\src\app\menu\menu.component.html and Paste the Code Below
<!--
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#moments" role="tab">Moments</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#notifications" role="tab">Notifications</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item float-xs-right">
<a class="nav-link" data-toggle="tab" href="#logout" role="tab">Logout</a>
</li>
</ul>
4. Open C:\Users\{user}\NgTweet\src\app\feed\feed.component.html and Paste the Code Below
<!--
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">home panel</div>
<div class="tab-pane" id="moments" role="tabpanel">moments panel</div>
<div class="tab-pane" id="notifications" role="tabpanel">notifications panel</div>
<div class="tab-pane" id="messages" role="tabpanel">messages panel</div>
<div class="tab-pane" id="logout" role="tabpanel">logout panel</div>
</div>
You can find the code template above here.
Now the page looks like:
5. Add Some Dummy Data to feed.components.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-feed',
templateUrl: './feed.component.html',
styleUrls: ['./feed.component.css']
})
export class FeedComponent implements OnInit {
tweets = [
{text: 'This is my third tweet.', authorName:'NguDeveloper', authorId: 'Jason', time: 'Sep 3'},
{text: 'This is my second tweet.', authorName:'NguDeveloper', authorId: 'Jason', time: 'Sep 2'},
{text: 'This is my first tweet.', authorName:'NguDeveloper', authorId: 'Jason', time: 'Sep 1'}
];
constructor() { }
ngOnInit() {
}
}
6. Change feed.component.html
<!--
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">
<div class="card card-block" *ngFor='let tweet of tweets'>
<nav class="nav nav-inline">
<a class="nav-link" href="#">{{tweet.authorName}}</a>
<a class="nav-link" href="#">@{{tweet.authorId}}</a>
<a class="nav-link" href="#">{{tweet.time}}</a>
</nav>
<p class="card-text">{{tweet.text}}</p>
</div>
</div>
<div class="tab-pane" id="moments" role="tabpanel">moments panel</div>
<div class="tab-pane" id="notifications" role="tabpanel">notifications panel</div>
<div class="tab-pane" id="messages" role="tabpanel">messages panel</div>
<div class="tab-pane" id="logout" role="tabpanel">logout panel</div>
</div>
Now the page looks like:
7. Add Avatars
In order to show the avatars, we need to download some. I got some free avatars from https://blog.placeit.net/free-avatar-pack/. Then you can put these images into the assets folder.
Then, change the tweets array to below (added avatar):
tweets = [
{text: 'The Moon Hasn\'t Been This Close in Almost 69 Years.',
authorName:'Science News', authorId: 'science', time: 'Sep 3', avatar:'000m'},
{text: 'Why do birds eat so much plastic? Scientists offer an answer.',
authorName:'Sf Gate', authorId: 'sfgate', time: 'Sep 2', avatar:'000f'},
{text: 'Dinosaur Rise More Gradual Than Previously Thought, Fossils Show.',
authorName:'Tech Times', authorId: 'techtimes', time: 'Sep 1', avatar:'001m'}
];
8. Open C:\Users\{user}\NgTweet\src\app\feed\feed.component.html and Change the Code to Below
<!--
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">
<div class="card card-block" *ngFor='let tweet of tweets'>
<div class="media">
<a class="media-left" href="#">
<img class="media-object" src="../assets/avatars/{{tweet.avartar}}.jpg"
alt="{{tweet.authorName}}" width="50px">
</a>
<div class="media-body">
<nav class="nav nav-inline">
<a class="nav-link" href="#">{{tweet.authorName}} @{{tweet.authorId}}</a>
{{tweet.time}}
</nav>
<p class="card-text">{{tweet.text}}</p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="moments" role="tabpanel">moments panel</div>
<div class="tab-pane" id="notifications" role="tabpanel">notifications panel</div>
<div class="tab-pane" id="messages" role="tabpanel">messages panel</div>
<div class="tab-pane" id="logout" role="tabpanel">logout panel</div>
</div>
Now the page will look like:
9. Change the Feed Component
Now you may find there something strange with the page C:\Users\{user}\NgTweet\src\app\feed\feed.component.html. We know it's a component of the panel, but it still contains the code of other tabpanels such as notifications and messages. Well, it's very easy to change this in Angular2 because it's a component based framework. Now let's change C:\Users\{user}\NgTweet\src\app\feed\feed.component.html.
<div class="card card-block" *ngFor='let tweet of tweets'>
<div class="media">
<a class="media-left" href="#">
<img class="media-object" src="../assets/avatars/{{tweet.avatar}}.jpg"
alt="{{tweet.authorName}}" width="50px">
</a>
<div class="media-body">
<nav class="nav nav-inline">
<a class="nav-link" href="#">{{tweet.authorName}} @{{tweet.authorId}}</a>
{{tweet.time}}
</nav>
<p class="card-text">{{tweet.text}}</p>
</div>
</div>
</div>
But we still need other tabpanels, so we can put the code into C:\Users\{user}\NgTweet\src\app\app\app.component.html easily.
<app-menu></app-menu>
<!--
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">
<app-feed></app-feed>
</div>
<div class="tab-pane" id="moments" role="tabpanel">moments panel</div>
<div class="tab-pane" id="notifications" role="tabpanel">notifications panel</div>
<div class="tab-pane" id="messages" role="tabpanel">messages panel</div>
<div class="tab-pane" id="logout" role="tabpanel">logout panel</div>
</div>
Save and see the page (you needn't refresh the page, because it will be automatically updated), it will be the same.
You may have seen the .css files, but we still haven't used them. Here, I give one simple sample. Since "Home" is a tab, commonly, there should be no bottom line. But as shown in the page, there was a line and now we need to get rid off it.
Open C:\Users\{user}\NgTweet\src\app\feed\feed.component.css and paste the code below:
.card:first-child {border-top-width:0px;}
10. See the Layout Without Data
Select the tweets part, comment it using "CTRL+/". Now the page shows there's no data. But some time the user doesn't know about that, so let's change to show some message when no data has been found. In this case, we will use the ngIf directive.
In order to show some message when no data is found, let's change the feed.component.html to :
<template [ngIf]="tweets.length">
<div class="card card-block" *ngFor='let tweet of tweets'>
<div class="media">
<a class="media-left" href="#">
<img class="media-object" src="../assets/avatars/{{tweet.avatar}}.jpg"
alt="{{tweet.authorName}}" width="50px">
</a>
<div class="media-body">
<nav class="nav nav-inline">
<a class="nav-link" href="#">{{tweet.authorName}} @{{tweet.authorId}}</a>
{{tweet.time}}
</nav>
<p class="card-text">{{tweet.text}}</p>
</div>
</div>
</div>
</template>
<template [ngIf]='!tweets.length'>
<div class="card card-block">
No data found.
</div>
</template>
Also, you can use <div .... *ngIf='tweets.length'> ... , but you need to add another <div> element.
Now let's save and see it. After being saved, you will find the result is the same as before, why?
Because in this case, the tweets array is undefined. So if you need to change it to:
tweets = [];
Then you will see:
Summary
Until now, we've changed some code and show a panel using Angular2 components, ngIf, ngFor directives and made a small change on CSS. Take a break!
History
