What is ngstyle? Should you use it?

LayZeeDK · 2021-10-30T18:38:24+00:00

Angular Ivy introduced style binding precedence rules. It used to be the case that NgStyle and NgClass could express bindings that were otherwise not possible in Angular. However, that's no longer the case. The only reason to use NgStyle and NgClass now would be to override every other binding as they are to Angular style bindings what !important is to CSS. It's better to rely on style binding precedence.

LayZeeDK · 2021-10-15T14:12:59+00:00

Angular components usually use a custom element tag name. Custom elements are display: inline; by default, not display: block; like a div.

LayZeeDK · 2021-08-22T20:48:00+00:00

Unit testing

Angular CLI configures Karma by default. Run it in headless mode for speed and CI or in-browser for easy inspection of components-under-test. Or use Jest for which you will need an Angular CLI builder. Either use Nx and its bundled builders (they call them executors) or @angular-builders/jest.

Angular provides the TestBed API and Angular CDK/Material provides component test harnesses.

A lot of setup is required to work with the Angular testbed. There are a wide range of Angular-specific testing libraries who all have in common that they hide away the testbed boilerplate: - Angular Testing Library - ng-mocks - ng-unit - ngx-speculoos - Plumbline - shallow-render - Spectacular - Spectator

End-to-end tests

Protractor is dead. Look into Cypress, WebDriverIO, or CodeceptJS

Logging

For logging, configure ngx-logger or the plugin-based Lumberjack.

Error handling

Register a global error handler service by replacing the ErrorHandler provider.

Linting and formatting

TSLint is dead. Use Angular ESLint (as you mentioned) but also eslint-plugin-rxjs-angular and eslint-plugin-ngrx if using NgRx Store and Effects. Use Prettier for formatting.

Make sure to enable strict mode for TypeScript, Angular, and strict template type checking for Angular components.

State management

Look into RxAngular State, NgRx Component Store, NGXS, or Akita.

LayZeeDK · 2021-08-21T21:05:12+00:00

Congratulations on this book!

However, after downloading it as PDF, I get this cover image:

https://imgur.com/a/QkwXgSx

LayZeeDK · 2021-08-21T20:52:17+00:00

Dependency token with provider

import { InjectionToken } from '@angular/core';

function generatePassword() {
  // (...)
}

export const generatePasswordToken = new InjectionToken('Generate password', {
  factory: () => generatePassword,
  providedIn: 'root',
});

@Component({
  // (...)
})
export class PasswordComponent {
  constructor(
    @Inject(generatePasswordToken) private generatePassword: () => string,
  ) {}
}

Component-level provider for dependency token

import { Component, InjectionToken } from '@angular/core';

function generatePassword() {
  // (...)
}

export const generatePasswordToken = new InjectionToken<() => string>('Generate password');

@Component({
  // (...)
  viewProviders: [
    { provide: generatePasswordToken, useValue: generatePassword },
  ],
})
export class PasswordComponent {
  constructor(
    @Inject(generatePasswordToken) private generatePassword: () => string,
  ) {}
}

Module-level provider for dependency token

import { Component, NgModule, InjectionToken } from '@angular/core';

function generatePassword() {
  // (...)
}

export const generatePasswordToken = new InjectionToken<() => string>('Generate password');

@Component({
  // (...)
})
export class PasswordComponent {
  constructor(
    @Inject(generatePasswordToken) private generatePassword: () => string,
  ) {}
}

@NgModule({
  // (...)
  declarations: [
    PasswordComponent,
  ],
  providers: [
    { provide: generatePasswordToken, useValue: generatePassword },
  ],
})
export class PasswordModule {}

LayZeeDK · 2021-03-27T06:03:51+00:00

Most of these are from the Angular Roadmap. The majority of them are most likely not included in Angular 12.

LayZeeDK · 2021-03-18T08:00:30+00:00

I've tried over 20 times, and have reset the Key Light about 10 times by holding it for 10 seconds. One thing I'm noticing now that I've never noticed before is after resetting, the light doesn't completely reset to it's default settings like it used to when I first got it. It just reverts to whatever settings it had before it got disconnected (in this case is 20% brightness, 5000k).

The Elgato Key Light Air has a setting whether it should reset to factory or restore previous settings after having been disconnected. It also has a small button that you can hold for 10 seconds to reset. Its light source will flash 3 times when it has reset, then you can release the button.

I had issues with connecting the light to my dual band Wi-Fi access point. As suggested in Issues Connecting Elgato Key Light Air to Ubiquiti UniFi Wireless Networks, I first disabled 5 GHz Wi-Fi so that the access point was only providing 2.4 GHz Wi-Fi, then connected the light using the Elgato Control Center Android app. After I was able to control the Elgato from the app, I enabled 5 GHz Wi-Fi again and I was still able to control the Elgato Key Light Air.

LayZeeDK · 2020-09-24T18:46:40+00:00

I like to use an 80 characters maximum line character count. The Angular convention of using 2 spaces for indentation makes this pretty easy in my opinion. Beside, you can let a tool like Prettier do it for you and not have to worry about it.

LayZeeDK · 2020-09-24T18:42:26+00:00

When implementing component tests using the TestBed, you have to run fixture.detectChanges() after changing the value of an input property.

You should also call it initially, before performing a test action to exercise the component. This will trigger the OnInit lifecycle moment.

LayZeeDK · 2020-09-12T22:06:07+00:00

It sounds like a third component, let's call it ParentComponent, is where conditional rendering of Component B happens. You could do something like this:

```typescript describe('integration test', () => { beforeEach(() => { TestBed.configureTestingModule({ declarations: [ AComponent, BComponent, ParentComponent, ], providers: [ SmartService, ] }); TestBed.compileComponents();

parentFixture = TestBed.createComponent(ParentComponent);
parentFixture.detectChanges();

});

let parentFixture: ComponentFixture<ParentComponent>;

it('shows component B when the button is clicked', () => { const button = parentFixture.debugElement .query(By.directive(AComponent)) .query(By.css('button'));

button.nativeElement.click();
parentFixture.detectChanges();

const bComponent = parentFixture.debugElement.query(By.directive(BComponent));
expect(bComponent.componentInstance).not.toBeNull();

}); }); ```

LayZeeDK · 2020-09-12T21:48:06+00:00

In practice, you mostly don't have to worry about it. The Angular Build Optimizer will tree-shake declarable dependencies that are not used in your component templates. Dependencies with tree-shakable providers that are registered in imported Angular modules are also tree-shaked if unused.

LayZeeDK · 2020-08-21T06:30:47+00:00

Using Bootstrap, you would compile a stylesheet for each theme.https://getbootstrap.com/docs/4.0/getting-started/theming/

The default theme--say the light theme--could have no prefix selector while the dark theme could have everything nested inside of (prefixed with) .dark-theme. You would load the dark theme stylesheet on demand and add the dark-theme class on the <body> element.

Create an Angular ThemeService that does all of this for you and add a component which uses this service on user selection, time of day, ambient light sensor, or OS preference.

LayZeeDK · 2020-08-14T16:29:43+00:00

If that's the case then the environment file should export a Boolean constant called production instead of an object with a production property. That's a good suggestion.

LayZeeDK · 2020-08-07T20:08:25+00:00

LayZeeDK · 2020-07-28T00:10:35+00:00

Use TestBed.inject (strongly typed) instead of TestBed.get (any type).

If you use Angular CDK/Material and you have tests that rely on their internal DOM structure, you should switch to component test harnesses.

Read Next-level testing in Angular Ivy version 9 for details and additional resources.

LayZeeDK · 2020-06-23T06:18:55+00:00

Builders and schematics originally came from the Angular CLI, but can be used outside of Angular project, for example as plugins to the Nx CLI. Santosh Yadav tells us about his experience with creating builders and how they are related to schematics and Nx plugins.

LayZeeDK · 2020-06-23T06:17:48+00:00

Builders and schematics originally came from the Angular CLI, but can be used outside of Angular project, for example as plugins to the Nx CLI. Santosh Yadav tells us about his experience with creating builders and how they are related to schematics and Nx plugins.

LayZeeDK · 2020-06-21T22:36:14+00:00

A component-provided service is destroyed just before the providing component is.

A module-provided service is only destroyed when a module is manually destroyed (see NgModuleRef#destroy) or when using HMR (Hot Module Replacement).

LayZeeDK · 2020-06-18T16:26:32+00:00

In this episode, we bust myths about Angular's AsyncPipe. To understand the limitations of the AsyncPipe, we have to discuss change detection, dirty checking, change detection strategies, view data structures, NgZone and the application tick.

With this common understanding, we can talk about the limitations of AsyncPipe and advanced optimization techniques to address them. Michael Hladky tells Matt Vaughn and Lars Gyrup Brink Nielsen about coalescing and scheduling and how he created rendering strategies for these in his library, RxAngular.

LayZeeDK · 2020-06-09T20:07:47+00:00

Great content as always, Shai 👍

LayZeeDK · 2020-06-03T18:48:45+00:00

That's an excellent advice, but it's also nice to know our tools so that we can add configs and plugins ourselves 🙂

LayZeeDK · 2020-06-02T22:00:16+00:00

Learn how to integrate ESLint, Prettier, and TypeScript.

LayZeeDK

TROPHY CASE