;
22 |
--------------------------------------------------------------------------------
/src/app/heroes2/heroes.component.css:
--------------------------------------------------------------------------------
1 | /* HeroesComponent's private CSS styles */
2 | .heroes {
3 | margin: 0 0 2em 0;
4 | list-style-type: none;
5 | padding: 0;
6 | width: 15em;
7 | }
8 | .heroes li {
9 | position: relative;
10 | cursor: pointer;
11 | background-color: #EEE;
12 | margin: .5em;
13 | padding: .3em 0;
14 | height: 1.6em;
15 | border-radius: 4px;
16 | }
17 |
18 | .heroes li:hover {
19 | color: #607D8B;
20 | background-color: #DDD;
21 | left: .1em;
22 | }
23 |
24 | .heroes a {
25 | color: #888;
26 | text-decoration: none;
27 | position: relative;
28 | display: block;
29 | width: 250px;
30 | }
31 |
32 | .heroes a:hover {
33 | color:#607D8B;
34 | }
35 |
36 | .heroes .badge {
37 | display: inline-block;
38 | font-size: small;
39 | color: white;
40 | padding: 0.8em 0.7em 0 0.7em;
41 | background-color: #607D8B;
42 | line-height: 1em;
43 | position: relative;
44 | left: -1px;
45 | top: -4px;
46 | height: 1.8em;
47 | min-width: 16px;
48 | text-align: right;
49 | margin-right: .8em;
50 | border-radius: 4px 0 0 4px;
51 | }
52 |
53 | .button {
54 | background-color: #eee;
55 | border: none;
56 | padding: 5px 10px;
57 | border-radius: 4px;
58 | cursor: pointer;
59 | cursor: hand;
60 | font-family: Arial;
61 | }
62 |
63 | button:hover {
64 | background-color: #cfd8dc;
65 | }
66 |
67 | button.delete {
68 | position: relative;
69 | left: 194px;
70 | top: -32px;
71 | background-color: gray !important;
72 | color: white;
73 | }
74 |
75 |
--------------------------------------------------------------------------------
/src/app/heroes2/heroes.component.html:
--------------------------------------------------------------------------------
1 | My Heroes {{ 'HELLO' | translate }}
2 |
3 |
4 |
7 |
8 |
11 |
12 |
13 |
22 |
--------------------------------------------------------------------------------
/src/app/heroes2/heroes.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2 |
3 | import { HeroesComponent } from './heroes.component';
4 |
5 | describe('HeroesComponent', () => {
6 | let component: HeroesComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(waitForAsync(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ HeroesComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(HeroesComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should be created', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/heroes2/heroes.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | import { TranslateModule } from '@ngx-translate/core';
4 | import { LocalizeRouterModule } from '@gilsdav/ngx-translate-router';
5 |
6 | import { Hero } from '../hero';
7 | import { HeroService } from '../hero.service';
8 | import { NgForOf } from '@angular/common';
9 | import { RouterLink } from '@angular/router';
10 |
11 | @Component({
12 | selector: 'app-heroes-bis',
13 | templateUrl: './heroes.component.html',
14 | styleUrls: ['./heroes.component.css'],
15 | standalone: true,
16 | imports: [
17 | TranslateModule,
18 | LocalizeRouterModule,
19 | NgForOf,
20 | RouterLink
21 | ]
22 | })
23 | export class HeroesComponentBis implements OnInit {
24 | heroes: Hero[] = [];
25 |
26 | constructor(private heroService: HeroService) { }
27 |
28 | ngOnInit() {
29 | this.getHeroes();
30 | }
31 |
32 | getHeroes(): void {
33 | this.heroService.getHeroes()
34 | .subscribe(heroes => this.heroes = heroes);
35 | }
36 |
37 | add(name: string): void {
38 | name = name.trim();
39 | if (!name) { return; }
40 | this.heroService.addHero(name)
41 | .subscribe(hero => {
42 | this.heroes.push(hero);
43 | });
44 | }
45 |
46 | delete(hero: Hero): void {
47 | this.heroService.deleteHero(hero)
48 | .subscribe(() => {
49 | this.heroes = this.heroes.filter(h => h !== hero);
50 | });
51 | }
52 |
53 | }
54 |
--------------------------------------------------------------------------------
/src/app/heroes2/heroes.module-routing.ts:
--------------------------------------------------------------------------------
1 | import { Routes } from "@angular/router";
2 | import { HeroesComponentBis } from "./heroes.component";
3 |
4 | export const routes: Routes = [
5 | { path: "", redirectTo: "home", pathMatch: "full" },
6 | { path: "home", component: HeroesComponentBis }
7 | ];
8 |
--------------------------------------------------------------------------------
/src/app/in-memory-data.service.ts:
--------------------------------------------------------------------------------
1 | import { InMemoryDbService } from 'angular-in-memory-web-api';
2 |
3 | export class InMemoryDataService implements InMemoryDbService {
4 | createDb() {
5 | const heroes = [
6 | { id: 11, name: 'Mr. Nice' },
7 | { id: 12, name: 'Narco' },
8 | { id: 13, name: 'Bombasto' },
9 | { id: 14, name: 'Celeritas' },
10 | { id: 15, name: 'Magneta' },
11 | { id: 16, name: 'RubberMan' },
12 | { id: 17, name: 'Dynama' },
13 | { id: 18, name: 'Dr IQ' },
14 | { id: 19, name: 'Magma' },
15 | { id: 20, name: 'Tornado' }
16 | ];
17 | return {heroes};
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/message.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, inject } from '@angular/core/testing';
2 |
3 | import { MessageService } from './message.service';
4 |
5 | describe('MessageService', () => {
6 | beforeEach(() => {
7 | TestBed.configureTestingModule({
8 | providers: [MessageService]
9 | });
10 | });
11 |
12 | it('should be created', inject([MessageService], (service: MessageService) => {
13 | expect(service).toBeTruthy();
14 | }));
15 | });
16 |
--------------------------------------------------------------------------------
/src/app/message.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 |
3 | @Injectable()
4 | export class MessageService {
5 | messages: string[] = [];
6 |
7 | add(message: string) {
8 | this.messages.push(message);
9 | }
10 |
11 | clear() {
12 | this.messages = [];
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/messages/messages.component.css:
--------------------------------------------------------------------------------
1 | /* MessagesComponent's private CSS styles */
2 | h2 {
3 | color: red;
4 | font-family: Arial, Helvetica, sans-serif;
5 | font-weight: lighter;
6 | }
7 | body {
8 | margin: 2em;
9 | }
10 | body, input[text], button {
11 | color: crimson;
12 | font-family: Cambria, Georgia;
13 | }
14 |
15 | button.clear {
16 | font-family: Arial;
17 | background-color: #eee;
18 | border: none;
19 | padding: 5px 10px;
20 | border-radius: 4px;
21 | cursor: pointer;
22 | cursor: hand;
23 | }
24 | button:hover {
25 | background-color: #cfd8dc;
26 | }
27 | button:disabled {
28 | background-color: #eee;
29 | color: #aaa;
30 | cursor: auto;
31 | }
32 | button.clear {
33 | color: #888;
34 | margin-bottom: 12px;
35 | }
36 |
--------------------------------------------------------------------------------
/src/app/messages/messages.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Messages
4 |
6 |
{{message}}
7 |
8 |