随笔分类 - Angular
摘要:in angular.json: "configurations": { "production": { "index": { "input": "src/index.prod.html", "output": "index.html" }, "fileReplacements": [ { "rep
阅读全文
摘要:For example we have multi API calls for one single page. this.course$ = this.coursesService.loadCourseById(courseId) this.essons$ = this.coursesServic
阅读全文
摘要:Let's say we want to dynamiclly change some style in :before or :after element. We cannot use NgStyle, it doesn's support this use case, what we can d
阅读全文
摘要:In angular.json
阅读全文
摘要:Component to be tested: <ng-template #defaultPlaceholder> Loading... </ng-template> <div class="loading-container" *ngIf="loading$ | async"> <ng-conta
阅读全文
摘要:Component: <div class="loading-placeholder" [ngClass]="extraClass"> <ng-container *ngIf="loadingService.config.showContent"> <ng-content></ng-c
阅读全文
摘要:Let's say we have App.component.ts, it use provider inside component level: @Component({ selector: 'app-root', templateUrl: './app.component.html', st
阅读全文
摘要:For example, we want to show loading spinner inside our appliction component trees. Because we might trigger loading spinner anywhere inside our appli
阅读全文
摘要:When new to Reactive programming with Angular. It is easy to fall into a performance issue, which is sending multi same http request to the backend. I
阅读全文
摘要:Component: import { Component, OnInit } from "@angular/core"; import { TwainService } from "../twain.service"; import { Observable, of } from "rxjs";
阅读全文
摘要:Generate a certificate git clone https://github.com/RubenVermeulen/generate-trusted-ssl-certificate.git cd generate-trusted-ssl-certificatebash genera
阅读全文
摘要:The component we test against: import {Component, OnInit} from '@angular/core'; import {Course} from "../model/course"; import {Observable} from "rxjs
阅读全文
摘要:In this post, we are going to see how to use 'fakeAsync' to test async code in Angular Context. fakeAsync using Zoom.js underhook, it detects all the
阅读全文
摘要:The smart component we want to test: import {Component, OnInit} from '@angular/core'; import {Course} from "../model/course"; import {Observable} from
阅读全文
摘要:Html: <input type="range" value="0" [style.--thumb-rotate]="720 * $any(input.value)/100 + 'deg'" #input (input)="0"> CSS: input[type="range"]::-webkit
阅读全文
摘要:The $any() type cast function Sometimes a binding expression triggers a type error during AOT compilation and it is not possible or difficult to fully
阅读全文
摘要:@Injectable({ providedIn: "root" | "any" | "platform" }) export class MyService {} More ProvidedIn: root Every service defined with 'root' will be pro
阅读全文
摘要:In Angular version 8, TestBed.get was deprecated. In Angular version 9, we see why: TestBed.inject<T> is introduced as a type-safe replacement. There
阅读全文
摘要:When we redirect to a different route from within our component's code using the Router.navigate or from within a component template via a [routerLink
阅读全文
摘要:onSave(personName) { this.person.name = personName; this.peopleService.save(this.person).subscribe(() => { // redirect back people list // this.router
阅读全文