Modules avec Angular 10

<div class="row pt-1 mb-2">
  <div class="col-md-3 text-center mb-2">
    <h1 class="h5">
      <i class="fas fa-laptop fa-lg mr-2 text-primary"></i>
      {{ name }}
      <i class="fas fa-mobile-alt fa-lg ml-2 mr-1 text-primary"></i>
      <i class="fas fa-tablet-alt fa-lg ml-2 mr-1 text-primary"></i>
    </h1>
  </div>
  <div class="col-md-3 text-center text-danger">
    <h2 class="h5">
      {{ angular }}<i class="fab fa-angular fa-lg ml-2 mr-1 text-danger"></i>
    </h2>
  </div>
  <div class="col-md-3 text-center text-primary">
    <h2 class="h5">
      {{ bootstrap }}<i class="fab fa-bootstrap fa-lg ml-2 mr-1 text-primary"></i>
    </h2>
  </div>
  <div class="col-md-3 text-center text-warning">
    <h2 class="h5">
      {{ fontawesome }}<i class="fab fa-font-awesome-flag fa-lg ml-2 mr-1 text-warning"></i>
    </h2>
  </div>
</div>
<hr>
<div class="row mb-1">
  <div class="col-md-12 text-center">
    <h3 class="h6">Features&nbsp;&nbsp;<i class="fas fa-list"></i></h3>
  </div>
</div>

<div class="row pt-2">
  <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2" *ngFor="let feature of features">
    <div class="card bg-light mb-3">
      <a routerLink="/{{ feature.link }}">
        <div class="card-header">
          <div class="row">
            <div class="col-10 col-xl-10">
              <h5 class="card-title">{{ feature.name }}</h5>
            </div>
            <div class="col-2 col-xl-2">
              <i class="fas {{ feature.icon }} fa-lg text-primary"></i>
            </div>
          </div>
        </div>
        <div class="card-body">
          <p class="card-text">{{ feature.description }}</p>
        </div>
      </a>
    </div>
  </div>
</div>

import { Component, OnInit } from '@angular/core';
import { environment } from '../../../../environments/environment';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  name = environment.application.name;
  angular = environment.application.angular;
  bootstrap = environment.application.bootstrap;
  fontawesome = environment.application.fontawesome;

  features: any;

  constructor() {
    this.features =
      [
        {
          name: 'Components',
          description: 'Define and control views',
          icon: 'fa-share-alt-square',
          link: 'components'
        },
        {
          name: 'Services',
          description: 'A great way to share information among classes',
          icon: 'fa-address-card',
          link: 'services'
        },
        {
          name: 'HttpClient',
          description: 'HttpClient',
          icon: 'fa-comment-alt',
          link: 'httpclient'
        },
        {
          name: 'Directives',
          description: 'Change the appearance or behavior of a DOM element',
          icon: 'fa-text-width',
          link: 'directives'
        },
        {
          name: 'Pipes',
          description: 'Write display-value transformations',
          icon: 'fa-code',
          link: 'pipes'
        },
        {
          name: 'RxJS/Observables',
          description: 'Provide support for passing messages between publishers and subscribers',
          icon: 'fa-comment-alt',
          link: 'observables'
        },
        {
          name: 'modal',
          description: 'Add dialogs to your site',
          icon: 'fa-comment-alt',
          link: 'modal'
        },
        {
          name: 'Reactiveform',
          description: 'Create Reactive Form',
          icon: 'fa-comment-alt',
          link: 'reactiveform'
        },
        {
          name: 'Template Driven Form',
          description: 'Create Template Driven Form',
          icon: 'fa-comment-alt',
          link: 'templatedriven'
        },
      ];

  }

  ngOnInit() {
  }

}

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { HomeComponent } from './home.component';
import { RouterTestingModule } from '@angular/router/testing';

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;

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

  beforeEach(() => {
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

# Développement
npm run start
http://localhost:4200/

# Tests
npm run lint
npm run test
npm run e2e

# Compilation
npm run build