Creating app-header component

- Project Repository: https://github.com/jsified-brains/momentz4ever-web-ng4/
- Branch specific for this task: https://github.com/jsified-brains/momentz4ever-web-ng4/tree/add-header-component

In the previous two tasks, we got our angular-4 project set up from scratch, created an app root component and also got unit-tests configured using Karma-Jasmine-Typescript-Webpack setup.

In this task, we’ll create a header component that we can have in any views of our application.

Creating app-header component

Lets create another component for our application, a header component that we can embed in any view of our application.

Under our project’s root folder we have a folder src. Under the src folder, create a folder hierarchy like - ./src/common/components. We’ll keep all common components under this folder.

Under ./src/common/components, create a folder app-header. To this folder, add file - app-header.html and app-header.ts.

📂src
| — 📂 common
| —| — 📂 components
| — | — | — 📂 header
| — | — | — | — 📜 app-header.html
| —| — | — | — 📜 app-header.ts

Below is the code sample of a very basic app-header component:

👆 we added a class AppHeaderComponent decorated with @Component decorator to which we passed a config object with below properties

selector: 'app-header' // acts as html tag to embed the tag in html
templateUrl: './app-header.html', // url or path of the component’s template html file.

@Input() decorator

Inside the component’s class in the above code, we declared a property title and decorated it with @Input() decorator. When decorated with @Input() , we can pass the value of this title property from the parent component where we are embedding app-header component as an attribute value.

Next, lets add the html template code for our application in the app-header.html file. To begin with, we’ll have a hard-coded value for the header text. Later on we’ll update this component to let the header text passed on to it from the parent page/component.

Below is the initial app-header.html file code.

<div style="background-color: #ccc">
 <h1>{{title}}</h1>
</div>

Adding the 'app-header' component to the application

We’ll add the app-header component we created above to our root component to quickly check if its working or not.

Update the app.component.html file with below code:

<app-header title='Momentz-4-ever'></app-header>
<h3>Hello from app component</h3>

👆 we embedded our new component app-header in app.component.html

We also would have to let angular know that we do intend to use this app-header component in our application. This is done by adding the component in the declarations array of the @ngModule config object of our AppModule in app.module.ts file. ( 👇 lines #7 and #13)

Now run the npm start on the command prompt if you haven’t been already running and when webpack completes the compilation open url `http://localhost:9000/` in your browser:

👏 Yay!!! our new app-header component is working.

However with the app-root component now being updated to use app-header component, the unit tests of the app-root component are now failing.

In the next task, lets fix the broken unit tests of app-root and also add unit tests for app-header component.