Angular – enums and switch case in templates
Although TypeScript has support for enums, Angular’s templates can access only fields …. by the related component. I will present two ways of accessing enums in templates.
Posts
Angular: extract a module with existing components and important lesson about NgModule
I often see Angular applications with bad architecture, especially no separation on modules. As a result, all components of an application are put in a single app/components folder which makes it hard to separate concerns. Which components are grouped together? Which components require a service? Which component is merely a part of another component? Are there any dumb components?
In this article, I’ll show how easy it is to refactor an Angular application and extract a new module with existing components. I’ll describe a simple case, with no global services.
…Add Angular Material to an Angular 8 application
Let’s assume you have an Angular application and you want to add the Angular Material library to it. What steps are necessary to take?
…Configure Angular CLI to use tabs instead of spaces
As a tab indentation enthusiast, I wanted to use an Angular project with tabs instead of 2 spaces. Unfortunately, there are several settings to change, and the schematics used by ng CLI command supports only spaces. Despite numerous requests (e.g. here and here), Google did not decide to introduce an option to set indentation for generated files. I went through the process of making Angular project tabbed and I’ll describe it here.
3 methods to retrieve an asset in Angular CLI
This post was inspired by a question on StackOverflow about loading (content) of an SVG file in Angular. In general, about retrieving the content of any file.
…Add Jasmine unit testing support to Angular in StackBlitz
I mentioned StackBlitz in the post about online code editors. This service allows for creating i.a. running Angular applications. Once I wanted to execute unit tests written in Jasmine inside it, and I hit a lot of troubles. Finally, I managed to resolve them all.
…Angular CLI: Different ways to include assets
In this article I will discuss several methods of adding and referring to static files in an Angular CLI application – may they be images, fonts or scripts:
- when the assets are in the
assetsfolder - when the assets are in any other folder
- when the assets are in the
node_modulesfolder
Duplicated ng-content and *ngTemplateOutlet
Recently (Angular component with varying appearance) I wrote how to use the same <ng-content> twice in a switch case.
Today I hit upon explanation of this fact in a GitHub issue (https://github.com/angular/angular/issues/22972) and I found another problem.
Namely, it is not possible to display at the same time twice the same <ng-content> even if it is packed inside a <ng-template>. Therefore the following example will not work:
Angular component with varying appearance and click event
It seemed to be very simple: I wanted to create a component which displays a link and provides the ability to disable the link. Namely, disable the click event on the link and make it look disabled. So, how to handle the click event correctly in Angular?
…