Category: Front End
Angular Unit Test: not use mock data in configureTestingModule because of @Component.providers: [Service]
Agnular unit test (standalone component), mock service in configureTestingmodule is set up, however, when running unit test, the mock service is not used, but using the real service instantiation, and one of the possible reasons is that the service is injected in the component level, like: Codes: @Component({ selector: ‘group-details’, standalone: true, imports: […],
Transloco (Angular)
Documentation: https://jsverse.gitbook.io/transloco Example to use nest function in json file
Unit test for signal output<T>()
Angular 16 introduces Signals, and this example is to show how to unit test Signal output<T>().
Angular Material – #4 – Tool Bar
import matToolbarModule <mat-toolbar class = “navbar”>… </mat-toolbar> // this is flexbox
Angular Material – #3 – Icon & Badge
import MatIconModule, import MatBadgeModule For Icon: https://material.io/resources/icons/?icon=alarm_on&style=baseline <mat-icon color = “primary | warn | accent”> icon code here </mat-icon> For Badge matBadge: show what badge is matBadgePosition: show where the badge locates, such as: below | above & before | after matBadgeSize: small | medium | large matBadgeOverlap: true(default) | false matBadgeColor matBadgeHidden
Angular Material – #2 – Button
import MatButtonModule Attribute for button appearance: mat-button: <button mat-button>…</button> mat-raised-button mat-fat-button mat-stroked-button mat-icon-button mat-fab mat-mini-fab Color Attribute for button color = “primary”: <button color = “primary” mat-button>…</button> color = “accent” color = “warn” disable ripple effect using disableRipple: <button color = “primary” mat-button disableRipple>…</button>
Angular Material – #1 – Typography
class = “mat-display-1” class = “mat-display-2” class = “mat-display-3” class = “mat-display-4” class = “mat-headling” // this is a heading for h1 class = “mat-title” // this is a heading for h2 class = “mat-subheading-2” // this is a heading for h3 class = “mat-subheading-1” // this is a heading for h4 class = “mat-body-1”
Section 26 Animation
To set up: npm install –save @angular/animation Steps to show animation: animation works with component: such as @Component({ selector: ‘app-name’, templateUrl: ‘…’, styleUrls: [], animation: [trigger(‘trigger-name’, […]), trigger(…)]}) using trigger() method to trigger the animation: trigger(name, […states…]) using state() method to represent different state status: state(name, style({…})) using transition() to make animation: transition(‘state 1 <=>
Section 25 Angular Universal
In order to let SEO to view you website content, it is better to use server pre-rendering page for the first time visit your page. So use Angular Universal to set up the server pre-rendering page.
Section 24 NgRx/effects
In order to deal with asynchronous responds, using ngrx side effects, install another package: npm install –save @ngrx/effects Actions: is one big observable which will listen all dispatched actions, and imported from @ngrx/effects ofType operator is unique for @ngrx/effects, which will filter actions and pass the actions observable (related to the ofType filter) to the