Create common app-header component in Angular 9

This tutorial guides you on how to create common app-header component in Angular 9. Let’s create common header component and fix the broken unit tests in this tutorial.

common app-header component in Angular 9

Let’s create new common header component manually in our application. You need to create a folder hierarchy like ‘src/common/components‘ and create common app-header component under this folder as shown below.

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

For example, app-header.component.ts file can have the following basic code in it.

import { Component, Input } from '@angular/core';

@Component({
   selector:'common-header',
   templateUrl: './app-header.component.html'
})

export class AppHeaderComponent {

    @Input() title: string;
}

Inside the component class we have declared title property and decorated it with @Input decorator. We can pass the value for this property from the parent component (app.component.html) as shown below.

And the app-header.component.html template will have the following code.

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

app.component.html

We have used selector “<common-header>” of our new common app-header component in our Angular application.

<common-header title='Recipe Book'></common-header>
<p>My First Angular App</p>

Note, don’t forget to register this new component in your App Module (app.module.ts). You need to import AppHeaderComponent and add it in the declarations array of @NgModule config object as shown below, since you had created this component manually.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AppHeaderComponent } from '../common/components/app-header/app-header.component';

@NgModule({
  declarations: [
    AppComponent,
    AppHeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

After running “ng serve” command you should see the following output by opening the URL ‘http://localhost:4200/‘ as shown in the picture below.

Ah ! our new common app-header component is working !

Fix broken unit tests – common app-header component

Since, our app-root component is updated to use our newly created common app-header component, the unit tests of app-root component has some issues. So you need to fix the broken unit tests in your app.component.spec.ts file as shown below.

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppHeaderComponent } from 'src/common/components/app-header/app-header.component';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent,
        AppHeaderComponent
      ],
    }).compileComponents();
  }));

  it('should create my first angular app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
  
  // unit test for header component
  it(`should display the common header with text "Recipe Book"`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Recipe Book');
  });


});

If you notice I have modified my app.component.spec.ts to include unit tests to check whether app is using the common app-header component and displaying the common header with text “Recipe Book”.

When you run the following unit tests command.

> npm run test

>npm run test

> [email protected] test C:\Users990\Documents\Workspaces\Angular\angular-app
> ng test

10% building 2/2 modules 0 active12 09 2020 09:12:29.207:WARN [karma]: No captured browser, open http://localhost:9876/
12 09 2020 09:12:29.212:INFO [karma-server]: Karma v5.0.9 server started at http://0.0.0.0:9876/
12 09 2020 09:12:29.212:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
12 09 2020 09:12:29.218:INFO [launcher]: Starting browser Chrome
12 09 2020 09:12:32.856:WARN [karma]: No captured browser, open http://localhost:9876/
12 09 2020 09:12:33.488:INFO [Chrome 85.0.4183.102 (Windows 10)]: Connected on socket JN0hCCYEQbmq6D3QAAAA with id 8752076
Chrome 85.0.4183.102 (Windows 10): Executed 2 of 2 SUCCESS (0.12 secs / 0.041 secs)
TOTAL: 2 SUCCESS
TOTAL: 2 SUCCESS

As you see from the above test results, our unit tests of app-root component is fixed and working fine now.

Also you can see Karma connected and unit tests specs status in the Karma dashboard as shown below.

That’s it. Hope it helped 🙂

Also See:

References:

angular docs