common app-header component in Angular

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.

common app-header component in Angular

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.

common app-header component in Angular unit tests

That’s it. Hope it helped πŸ™‚

Also See:

References:

Leave a Reply

avatar
  Subscribe  
Notify of