Home

Labs

Start the app

• Open your terminal
• Execute npm start -- --open starting your Angular application
• Visit http://localhost:4200
• Have a look at the beautiful start page the Angular team has prepared for you ❤️ .

Make your first change

• Open your favourite editor and open src/app/app.component.html of your application
• Find the span element having the content Welcome
• Change the content from Welcome to whatever you like (e.g. Hello Porsche 2019! 😉)

🕵️‍♂️ Plesae note that the application automatically recompiles and refreshes automatically.

Enhance AppComponent

• Add a second property to app.component.ts
• You can name your component what ever you like (e.g. name, age, street, location, hobby, ...)
• Bind your property in the template app.component.html using double curly braces

Create your 1st component

• Open your terminal
• Execute npm run ng generate component todo/todo-checker
• ☝️ Recognize that the app.module.ts was updated too and that the TodoCheckerComponent has been registered.
• Open src/app/todo/todo-checker.component.html and paste the following template

  <!-- todo-checker.component.html -->
  <div class="todo">
    <label class="todo__label">
      {{ "TODO: Bind the value of the todo's text" }}
      <input type="checkbox" />
      <span class="todo__checkmark"></span>
    </label>
  </div>

• Open app.component.html
• Replace the existing template with your component

  <!-- app.component.html -->
  <ws-todo-checker></ws-todo-checker>

• Finally, have a look at your browser. Your component should be displayed.

Bonus

We prepared some css-Styles for you. You can check them out in the directory client/src/scss/.

Simple bindings

• Open todo-checker.component.ts
• Add a property todo, which is an object defining a string text and a boolean flag isDone.
• Bind the todo to the HTML template.
• Create an event binding for the checkbox listening for the change-Event.
• Every time the change event is fired the method emitToggle should be executed.
• Implement the method emitToggle that shows an alert-message for the moment.

Hints

<!-- Binding with curly braces -->
{{ todo.text }}

<!-- Property binding -->
<input [checked]="...">

<!-- Event binding -->
<input (change)="...">

Dataflow

• Open todo-checker.component.ts
• Make the property todo to be an @Input
• Define an @Output called toggle and initialize it with an EventEmitter
• Make toggle emit whenever the change-Event of the checkbox is fired
• Open app.component.ts
• Make the AppCompoenent pass a todo-Object (with text and isDone) to the <ws-todo-checker> using the property-binding
• Handle the toggle-Event of ws-todo-checker by showing an alert-Window displaying the respective todo whenever the event is fired

Hints

// Imports
import { Input, Output } from '@angular/core';
 
// Input-Binding
@Input() todo;

// Output-Binding
@Output() toggle = new EventEmitter();
this.toggle.emit(/* ... */);

<!-- Property binding -->
<ws-todo-checker [todo]="...">

<!-- Event binding -->
<ws-todo-checker (toggle)="notify($event)" >

Multiply your components

• open app.component.ts.
• replace the single todo with a collection of at least 2 todos.
• bind todos to the template using *ngFor.
• adjust the event binding toggle calling the method checkOrUncheckTodo (see hints) updating the respective todo.

Hints

<ws-todo-checker
  [todo]="todo"
  (toggle)="checkOrUncheckTodo($event)"
  *ngFor="let todo of todos"
><ws-todo-checker>

// NgFo needs to be imported by AppComponent
  imports: [NgFor, TodoCheckerComponent],
// ...

todos = [/* ... */]

// ...

checkOrUncheckTodo(todoForUpdate) {
  this.todos = this.todos.map(todo => todo.text === todoForUpdate.text
    ? { ...todo, isDone: !todo.isDone }
    : todo
  );
}

Secure your coding with types

• Generate an interface executing ng generate interface models/todo(It creates a directory model and places a file namedtodo.ts` in it)
  • define 2 properties: text: string; isDone: boolean;
• Look up every place you are using todo (e.g. app.component.ts & todo-checker.component.ts)
• Annotate each todo-property with your created type Todo

Hints

@Input() todo: Todo;
@Output() toggle = new EventEmitter<Todo>();

Bonus

• Install the extension Angular Language Service to have Auto-Completion in your templates.

Create your 1st form

• Open your terminal
• Generate a new component by running ng g c todo-quick-add
• Open src/app/todo/todo-quick-add.component.html and paste the following template

  <!-- todo-quick-add.component.html -->
  <input
    <!-- DEFINE THE TEMPLATE REFERENCE -->
    type="text"
    class="todo__input"
    placeholder="What needs to be done?"
    (keydown.enter)="emitCreate(<!-- PASS THE TEMPLATE REFERENCE TO YOUR COMPONENT -->)"
  />
  
  <button 
    (click)="emitCreate(<!-- PASS THE TEMPLATE REFERENCE TO YOUR COMPONENT -->)"
     class="todo__button--primary">
    Add
  </button>

• Implement the method emitCreate(input: HTMLInputElement)
• Make emitCreate emit the event create (You need to define an @Output for that)
• The event create should transport the text coming from the input-Field.
• Furthermore the property isDone should initially be set to false.
• Open app.component.html
• Handle the create-Event and add the provided Todo to the existing colleciton todos
• Every time you enter a new todo the list of <ws-todo-checker> should automatically grow.

Extract a feature module

• Generate a new TodosModule
• Generate a TodosComponent that is the root component of Todos feature
• Move all existing components used by the todos feature into the newly created /todos folder
• Move component declarations of those components from AppModule into TodosModule
• Move todo markup from app.component.html into todos.component.html
• Move todos array and methods from app.component.ts into todos.component.ts
• Export TodosComponent from TodosModule
• Import TodosModule in AppModule
• Use the new TodosComponent in app.component.html

Hints

ng generate module todos

ng generate component todos

@NgModule({
  declarations: [
    TodosComponent,
    // ...
  ],
  exports: [TodosComponent]
})
export class TodosModule {}

<!-- app.component.html -->
<ws-todos></ws-todos>

Create your 1st service

• Generate a TodosService in a /shared sub-folder of /todos (this is an Angular convention to show that this service will be used by multiple components). This service will handle all todo data operations.
• Move the todo array from TodosComponent into your new service.
• Create a method getAllTodos that returns the array and use it in TodosComponent.

Bonus

• Create method create (that adds a todo) and use it in TodosComponent.
• Create method update (that replaces a todo) and use it in TodosComponent.

Hints

ng generate service todos/shared/todos

Set up Http

• open main.ts
• useprovideHttpClient

Hints

import { provideHttpClient } from '@angular/common/http';

// ...

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()],
}).catch(err => console.error(err));

Load todos from API

• Switch to the directory server/
• Run npm start
• Open todos.service.ts
• Implement the method query that loads all todos from the API (URL: http://localhost:3000/todos)
• Bind the loaded todos via subscribe
• Checkout http://localhost:4200 if the todos from the API are displayed

Hints

• You can find a detailed documentation of the API in the server's README
• Make sure to subscribe in the todos.component.ts
• Make sure to call the service in ngOnInit

// todos.service.ts
constructor(private http: HttpClient) {}

query(): Observable<Todo[]> {
  return this.http.get<Todo[]>('http://localhost:3000/todos');
}

// todos.component.ts
ngOnInit(): void {
  this.todosService.query().subscribe(todosFromApi => this.todos = todosFromApi);
}

Persist new todos

• Enhance todos.service.ts to store a todo in the database

💡 Please note, after storing a todo you need to manually refresh the page to see the created todo in the list. We will take care about this UX-fail in the next step.

Hints

return this.http.post<Todo>('http://localhost:3000/todos', newTodo);

Bonus

• When a todo is checked it should immediately persisted (using Put-Request)
• When a todo is deleted it should immediately removed (using DELETE-Request)
  • If you want to add a delete button to <todo-checker> you can use the following template

    <div class="todo">
      <label class="todo__label" [ngClass]="{ 'todo--is-done': todo.isDone }">
        {{ todo.text }}
        <input type="checkbox" [checked]="todo.isDone" (change)="emitToggle()" />
        <span class="todo__checkmark"></span>
      </label>
      
      <!-- ⭐️ NEW NEW NEW ⭐️ -->
      <span class="todo__delete" (click)="emitRemove()"></span>
    </div>

Auto refresh todos

• Open todos.component.ts.
• Use the operator switchMap loading all todos after a todo has been created successfully.
• Check http://localhost:4200 to see that the list of todos updates automatically.

Hints

import { switchMap } from 'rxjs/operators';

createTodo(newTodo: Todo) {
   this.todosService
     .create(newTodo)
     .pipe(switchMap(() => this.todosService.query()))
     .subscribe(todos => (this.todos = todos))
}

Clean up subscriptions

• Open todos.component.ts.
• Add a new property sink
• Initialize sink with new Subscription
• Go through the component code and add each subscribe-Block to your sink
• Implement OnDestroy
• Call this.sink.unsubscribe() in ngOnDestroy cleaning up all Subscriptions.

Hints

import { Subscription } from 'rxjs';
sink = new Subscription();

sink.add(/* ... */);
sink.unsubscribe();

Set up Routing

• Create an AppRoutingModule that
  • imports RouterModule
  • configure RouterModule (using RouterModule.forRoot()) to
    • map route 'todos' to TodosComponent
    • redirect to 'todos' when url path is empty
  • Re-exports RouterModule
• Import AppRoutingModule in AppModule
• use router-outlet to show todos in app.component.html

💡 If your todos are shown 2 times, try removing the direct view child (ws-todos).

Hints

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'todos' },
  { path: 'todos', component: TodosComponent }
];

Create Todo Navigation

• Create a TodosRoutingModule like you did with AppRoutingModule and import it in TodosModule
• Configure route { path: 'todos/:query', component: TodosComponent } in TodosRoutingModule
• Change AppRoutingModule routes to [{ path: '', pathMatch: 'full', redirectTo: 'todos/all' }]
• Create a todos navigation component called todos-link-navigation as part of TodosModule (see hints for html content): ng generate component todos/todos-link-navigation
• Add the <ws-todos-link-navigation></ws-todos-link-navigation> to todos.component.html
• Extend the query() method of todos.service.ts to accept an optional string parameter for filtering the results:

query(param?: string): Observable<Todo[]> {
    return this.http.get<Todo[]>(`${todosUrl}?query=${param ? param : 'all'}`);
  }

• Use ActivatedRoute#paramMap to read out the dynamic query url-parameter:

// todos.component.ts ngOnInit():
this.route.paramMap
 .pipe(
   switchMap(paramMap => this.todosService.query(paramMap.get('query')))
  )
 .subscribe(todos => (this.todos = todos)

Hints

<!-- todos-link-navigation.component.html -->
<ul class="todo__link-navigation">
  <li class="todo__link-navigation__link">
    <a routerLink="../all" routerLinkActive="todo__link--active">All</a>
  </li>
  <li class="todo__link-navigation__link">
    <a routerLink="../active" routerLinkActive="todo__link--active">Active</a>
  </li>
  <li class="todo__link-navigation__link">
    <a routerLink="../complete" routerLinkActive="todo__link--active"
      >Complete</a
    >
  </li>
</ul>

Lazy Loading

Watch your trainers implement lazy loading :-)