Skip to content

Instantly share code, notes, and snippets.

View MatLang's full-sized avatar

Matthias Lang MatLang

  • Munich, Germany
View GitHub Profile
  1. What does the acronym LIFT describe?
  • Locate code quickly
  • Identify easily (naming)
  • flat folder structure
  • Try to be DRY
  1. What 2 options for organizing an Angular project folder do exist?
  • convention based
  • feature based
@MatLang
MatLang / course-outline.md
Last active August 19, 2019 10:32
Course outline
@MatLang
MatLang / rxjs.md
Last active July 4, 2019 12:21
Angular RxJS Course #rxjs #summary
  • 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
MatLang / notes.md
Created June 27, 2019 09:38
Angular Core Deep Dive Course Summary

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
MatLang / show-contacts.directive.spec.ts
Created June 25, 2019 13:51
Structural directive testing #testing #directive #structural
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
MatLang / contact-edit.component.spec.ts
Created June 25, 2019 13:05
Component testing #testing #component
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
MatLang / favorite-icon.directive.spec.ts
Created June 25, 2019 13:05
Testing attribute directives #testing #attributes
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
MatLang / service-testing.spec.ts
Created June 19, 2019 10:35
Service testing #testing
describe('CalculatorService', () => {
let calculator: CalculatorService,
loggerSpy: any;
beforeEach(()=> {
console.log("Calling beforeEach");
loggerSpy = jasmine.createSpyObj('LoggerService', ["log"]);
@MatLang
MatLang / service-testing.spec.ts
Created June 19, 2019 10:34
Service testing #testing
describe('CoursesService', () => {
let coursesService: CoursesService,
httpTestingController: HttpTestingController;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
HttpClientTestingModule
@MatLang
MatLang / smart-component-testing.spec.ts
Created June 19, 2019 10:33
Smart component testing #testing
describe("HomeComponent", () => {
let fixture: ComponentFixture<HomeComponent>;
let component: HomeComponent;
let el: DebugElement;
let coursesService: any;
const beginnerCourses = setupCourses().filter(
course => course.category == "BEGINNER"
);