MatLang

1. What does the acronym LIFT describe?

• Locate code quickly
• Identify easily (naming)
• flat folder structure
• Try to be DRY

2. What 2 options for organizing an Angular project folder do exist?

• convention based
• feature based

MatLang

Introduction Course Prerequesites 0. General Preparation

1. Javascript Execution context:

• https://codeburst.io/js-demystified-04-execution-context-97dea52c8ac6

2. DOM
3. CSS
4. HTML
5. Testing

MatLang

• Streams vs Observables
• Error handling in subscribe
• Create observable that handles fetch request
• Noop
• Map
• Example of reactive design: beginner courses and advanced courses with individual observables based on 1 http observable and 1 courses observable filtering out the payload of the fetch request => too many http requests
• tap()
• shareReplay()
• concat()
• filter()

MatLang

Angular directives in depth

• Angular directives decorator
• @Hostbinding with and without getters
• @Hostlistener: concept, $event, exportAs (why?)
• attribute directives
• structural directives
• replace *ngIf by more explicit syntax
• [FC] templateref: Represents an embedded template that can be used to instantiate embedded views. To instantiate embedded views based on a template, use the ViewContainerRef method createEmbeddedView(). Access a TemplateRef instance by placing a directive on an ng-template element (or directive prefixed with *). The TemplateRef for the embedded view is injected into the constructor of the directive, using the TemplateRef token. You can also use a Query to find a TemplateRef associated with a component or a directive.

MatLang

import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ShowContactsDirective } from './show-contacts.directive';
import { getElement } from '../../testing';

@Component({
  template: `
    <div *appShowContacts="true">
      <p>This is shown</p>
    </div>

MatLang

import { DebugElement } from '@angular/core';
import {
  ComponentFixture,
  fakeAsync,
  TestBed,
  tick
} from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';

MatLang

import { Component } from '@angular/core';
import {
  ComponentFixture,
  TestBed,
  TestModuleMetadata
} from '@angular/core/testing';
import { constants } from './favorite-icon.constants';
import { FavoriteIconDirective } from './favorite-icon.directive';
import { getStarElement, doClassesMatch } from '../../testing';

MatLang

describe('CalculatorService', () => {

    let calculator: CalculatorService,
        loggerSpy: any;

    beforeEach(()=> {

        console.log("Calling beforeEach");

        loggerSpy = jasmine.createSpyObj('LoggerService', ["log"]);

MatLang

describe('CoursesService', () => {

    let coursesService: CoursesService,
        httpTestingController: HttpTestingController;

    beforeEach(() => {

        TestBed.configureTestingModule({
            imports: [
                HttpClientTestingModule

MatLang

describe("HomeComponent", () => {
  let fixture: ComponentFixture<HomeComponent>;
  let component: HomeComponent;
  let el: DebugElement;
  let coursesService: any;

  const beginnerCourses = setupCourses().filter(
    course => course.category == "BEGINNER"
  );