Learn Some Angular Code And Tricks

Introduction

In this article, we are going to learn some Angular code and tricks.

When projecting content in Angular you can use a CSS styles selector to select the projected component. ⠀

For example, the project uses the .header class in the below code.

import { Component, OnInit,Input } from '@angular/core';
@Component({
selector: "lib-testlibrary",
template: `<div class="header">
<ng-content select=".header" ></ng-content>
</div>`,
styles: [
` .header { color: blue}`
]
})
export class TestlibraryComponent implements OnInit {
constructor() { }
ngOnInit(): void {}
}

In the ng-content tag inside we able to use all CSS styles like, h1,h2,p,span….etc in the select.

Next, we are going to see @angular-extensions/pretty-html-log

The updated angular version improved the debugging of the angular component tests. It will be adding a console.logNgHTML method. This method to print the inner HTML of the l ComponentFixture l DebugElement l NativeElement l HTML String l Print Angular comments l Print Angular theme

Log the content innerHTML of a fixture:

console.logNgHTML(fixture);

DebugElement (or multiple debugElements)

console.logNgHTML(fixture.debugElement);

NativeElement (or multiple nativeElements)

console.logNgHTML(fixture.debugElement.nativeElement);

Simple HTML string

console.logNgHTML('<p>Test Sat</p>');

Print Angular comments

Angular adds some commands in our angular HTML file. When debugging our test, changes not printed at the time we will pass the addition flag to logNgHTML.

console.logNgHTML(fixture,true);

Print Angular theme

In the log, we are able to changes the theme using @angular-extensions/pretty-html-log to print the HTML themes in different ways

The pretty-html-log file importted from base library @angular-extensions/pretty-html-log .

import { THEMES } from 'pretty-html-log';
console.logNgHTML(fixture, false, THEMES.VSCODE);

The next one is Angular Lazy loading

Did you know that you can use the Angular schematics to create a lazy loaded feature in the module using the below command?

ng g m features/sat --route sat --module app.module.ts

After executing this command, lazy loading will be created inside the src folder.

Inside the file routing, a module, component, and HTML file were created.

The Final one is Decorators

Angular allows you to combine multiple Decorators on a class field

For example:

export class SatComponent implements OnInit {
@HostBinding('class.readonly') @Input() readonly=false;
constructor() { }
ngOnInit(): void { }
}

Here we accept the read-only property as an Input and reflect it with a read-only class to the Host element.

I hope this article was helpful!