We will build a hackernews clone.
We first define our application layout. We will define every layout as a component. For that we will define a header component for logo and menu, and a footer component for other links at bottom of the page.

We first generate our header component

ng generate component Header

We than generate our footer component.

ng generate component Header

Angular cli also generates import statement in app.module.ts file for us. App module is the main application module.
Notice that we have create a component named Header but angular has generated a class named HeaderComponent and defined a selector app-header for that component.

Next we will change app.component.html and include our header and footer components.
To include the header component we need to use app-header selector and for footer we need to use app-footer selector.

After that you will see that our two new components can be rendered correctly. But without styling.

Since we are doing a hackernews clone we will also need storylist component and storyitem component for the content of the stories. We can generate them by using angular-cli as well.

ng generate component StoryList

ng generate component StoryItem

We will again change the app.component.html file and add story list component to display top stories on the first page.

Lets build a dummy list with SotryItems and an iterator.

We will only display a text with an index

We made a mistake. As you can see that angular2 application is showing also error message in browser console for template failures. This help a lot. Oo I made a mistake instead of double curly brace i used single curly brace.

Ok that is it for this video We will use Story item later.

source