Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Angular Cookbook
Angular Cookbook

Angular Cookbook: Over 80 actionable recipes every Angular developer should know

Arrow left icon
Profile Icon Muhammad Ahsan Ayaz
Arrow right icon
$20.98 $29.99
Book Aug 2021 652 pages 1st Edition
eBook
$20.98 $29.99
Print
$38.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Muhammad Ahsan Ayaz
Arrow right icon
$20.98 $29.99
Book Aug 2021 652 pages 1st Edition
eBook
$20.98 $29.99
Print
$38.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$20.98 $29.99
Print
$38.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Table of content icon View table of contents Preview book icon Preview Book

Angular Cookbook

Chapter 2: Understanding and Using Angular Directives

In this chapter, you'll learn about Angular directives in depth. You'll learn about attribute directives, with a really good real-world example of using a highlight directive. You'll also write your first structural directive and see how ViewContainer and TemplateRef services work together to add/remove elements from the Document Object Model (DOM), just as in the case of *ngIf, and you'll create some really cool attribute directives that do different tasks. Finally, you'll learn how to use multiple structural directives on the same HyperText Markup Language (HTML) element and how to enhance template type checking for your custom directives.

Here are the recipes we're going to cover in this chapter:

  • Using attribute directives to handle the appearance of elements
  • Creating a directive to calculate the read time for articles
  • Creating a basic directive that allows you to vertically scroll to an element
  • Writing your first custom structural directive
  • How to use *ngIf and *ngSwitch together
  • Enhancing template type checking for your custom directives

Technical requirements

For the recipes in this chapter, make sure you have Git and Node.js installed on your machine. You also need to have the @angular/cli package installed, which you can do with npm install -g @angular/cli from your terminal. The code for this chapter can be found at https://github.com/PacktPublishing/Angular-Cookbook/tree/master/chapter02.

Using attribute directives to handle the appearance of elements

In this recipe, you'll work with an Angular attribute directive named highlight. With this directive, you'll be able to search words and phrases within a paragraph and highlight them on the go. The whole paragraph's container background will also be changed when we have a search in action.

Getting ready

The project we are going to work with resides in chapter02/start_here/ad-attribute-directive, inside the cloned repository:

  1. Open the project in Visual Studio Code (VS Code).
  2. Open the terminal, and run npm install to install the dependencies of the project.
  3. Once done, run ng serve -o.

    This should open the app in a new browser tab, and you should see something like this:

Figure 2.1 – ad-attribute-directives app running on http://localhost:4200

Figure 2.1 – ad-attribute-directives app running on http://localhost:4200

How to do it…

So far, the app has a search input box and a paragraph text. We need to be able to type a search query into the search box so that we can highlight the matching text in the paragraph. Here are the steps on how we achieve this:

  1. We'll create a property named searchText in the app.component.ts file that we'll use as a model for the search-text input:
    ...
    export class AppComponent {
      title = 'ad-attribute-directive';
      searchText = '';
    }
  2. Then, we use this searchText property in the app.component.html file with the search input as a ngModel, as follows:
    …
    <div class="content" role="main">
      ...
        <input [(ngModel)]="searchText" type="text"     class="form-control" placeholder="Search Text"     aria-label="Username" aria-describedby=    "basic-addon1">
      </div>

    Important note

    Notice that ngModel doesn't work without FormsModule, and so we've already imported FormsModule into our app.module.ts file.

  3. Now, we'll create an attribute directive named highlight by using the following command inside our ad-attributes-directive project:
     ng g d directives/highlight
  4. The preceding command generated a directive that has a selector called appHighlight. See the How it works… section for why that happens. Now that we have the directive in place, we'll create two inputs for the directive to be passed from AppComponent (from app.component.html)—one for the search text and another for the highlight color. The code should look like this in the highlight.directive.ts file:
     import { Directive, Input } from '@angular/core';
    @Directive({
      selector: '[appHighlight]'
    })
    export class HighlightDirective {
      @Input() highlightText = '';
      @Input() highlightColor = 'yellow';
      constructor() { }
    }
  5. Since we have the inputs in place now, let's use the appHighlight directive in app.component.html and pass the searchText model from there to the appHighlight directive:
    <div class="content" role="main">
      ...
      <p class="text-content" appHighlight   [highlightText]="searchText">
        ...
      </p>
    </div>
  6. We'll listen to the input changes now for the searchText input, using ngOnChanges. Please see the Using ngOnChanges to intercept input property changes recipe in Chapter 1, Winning Components Communication, for how to listen to input changes. For now, we'll only do a console.log when the input changes:
    import { Directive, Input, SimpleChanges, OnChanges } from '@angular/core';
    @Directive({
      selector: '[appHighlight]'
    })
    export class HighlightDirective implements OnChanges {
      ...
      ngOnChanges(changes: SimpleChanges) {
        if (changes.highlightText.firstChange) {
          return;
        }
        const { currentValue } = changes.highlightText;
        console.log(currentValue);
      }
    }
  7. Now, we'll write some logic for what to do when we actually have something to search for. For this, we'll first import the ElementRef service so that we can get access to the template element on which our directive is applied. Here's how we'll do this:
    import { Directive, Input, SimpleChanges, OnChanges, ElementRef } from '@angular/core';
    @Directive({
      selector: '[appHighlight]'
    })
    export class HighlightDirective implements OnChanges {
      @Input() highlightText = '';
      @Input() highlightColor = 'yellow';
      constructor(private el: ElementRef) { }
      ...
    }
  8. Now, we'll replace every matching text in our el element with a custom <span> tag with some hardcoded styles. Update your ngOnChanges code in highlight.directive.ts as follows, and see the result:
    ngOnChanges(changes: SimpleChanges) {
        if (changes.highlightText.firstChange) {
          return;
        }
        const { currentValue } = changes.highlightText;
        if (currentValue) {
          const regExp = new RegExp(`(${currentValue})`,       'gi')
          this.el.nativeElement.innerHTML =       this.el.nativeElement.innerHTML.replace       (regExp, `<span style="background-color:       ${this.highlightColor}">\$1</span>`)
        }
     }

    Tip

    You'll notice that if you type a word, it will still just show only one letter highlighted. That's because whenever we replace the innerHTML property, we end up changing the original text. Let's fix that in the next step.

  9. To keep the original text intact, let's create a property name of originalHTML and assign an initial value to it on the first change. We'll also use the originalHTML property while replacing the values:
    ...
    export class HighlightDirective implements OnChanges {
      @Input() highlightText = '';
      @Input() highlightColor = 'yellow';
      originalHTML = '';
      constructor(private el: ElementRef) { }
      ngOnChanges(changes: SimpleChanges) {
        if (changes.highlightText.firstChange) {
          this.originalHTML = this.el.nativeElement.      innerHTML;
          return;
        }
        const { currentValue } = changes.highlightText;
        if (currentValue) {
          const regExp = new RegExp(`(${currentValue})`,       'gi')
          this.el.nativeElement.innerHTML =       this.originalHTML.replace(regExp, `<span       style="background-color: ${this.      highlightColor}">\$1</span>`)
        }
      }
    }
  10. Now, we'll write some logic to reset everything back to the originalHTML property when we remove our search query (when the search text is empty). In order to do so, let's add an else condition, as follows:
    ...
    export class HighlightDirective implements OnChanges {
      ...
      ngOnChanges(changes: SimpleChanges) {
       ...
        if (currentValue) {
          const regExp = new RegExp(`(${currentValue})`,       'gi')
          this.el.nativeElement.innerHTML = this.      originalHTML.replace(regExp, `<span       style="background-color: ${this.      highlightColor}">\$1</span>`)
        } else {
          this.el.nativeElement.innerHTML =       this.originalHTML;
        }
      }
    }

How it works…

We create an attribute directive that takes the highlightText and highlightColor inputs and then listens to the input changes for the highlightText input using the SimpleChanges application programming interface (API) and the ngOnChanges life cycle hook.

First, we make sure to save the original content of the target element by getting the attached element using the ElementRef service, using the .nativeElement.innerHTML on the element, and then saving it to originalHTML property of the directive. Then, whenever the input changes, we replace the text with an additional HTML element (a <span> element) and add the background color to this span element. We then replace the innerHTML property of the target element with this modified version of the content. That's all the magic!

See also

Creating a directive to calculate the read time for articles

In this recipe, you'll create an attribute directive to calculate the read time of an article, just like Medium. The code for this recipe is highly inspired by my existing repository on GitHub, which you can view at the following link: https://github.com/AhsanAyaz/ngx-read-time.

Getting ready

The project for this recipe resides in chapter02/start_here/ng-read-time-directive:

  1. Open the project in VS Code.
  2. Open the terminal, and run npm install to install the dependencies of the project.
  3. Once done, run ng serve -o.

    This should open the app in a new browser tab, and you should see something like this:

Figure 2.2 – ng-read-time-directive app running on http://localhost:4200

Figure 2.2 – ng-read-time-directive app running on http://localhost:4200

How to do it…

Right now, we have a paragraph in our app.component.html file for which we need to calculate the read time in minutes. Let's get started:

  1. First, we'll create an attribute directive named read-time. To do that, run the following command:
    ng g directive directives/read-time
  2. The preceding command created an appReadTime directive. We'll first apply this directive to div inside the app.component.html file with the id property set to mainContent, as follows:
    ...
    <div class="content" role="main" id="mainContent" appReadTime>
    ...
    </div>
  3. Now, we'll create a configuration object for our appReadTime directive. This configuration will contain a wordsPerMinute value, on the basis of which we'll calculate the read time. Let's create an input inside the read-time.directive.ts file with a ReadTimeConfig exported interface for the configuration, as follows:
    import { Directive, Input } from '@angular/core';
    export interface ReadTimeConfig {
      wordsPerMinute: number;
    }
    @Directive({
      selector: '[appReadTime]'
    })
    export class ReadTimeDirective {
      @Input() configuration: ReadTimeConfig = {
        wordsPerMinute: 200
      }
      constructor() { }
    }
  4. We can now move on to getting the text to calculate the read time. For this, we'll use the ElementRef service to retrieve the textContent property of the element. We'll extract the textContent property and assign it to a local variable named text in the ngOnInit life cycle hook, as follows:
    import { Directive, Input, ElementRef, OnInit } from '@angular/core';
    ...
    export class ReadTimeDirective implements OnInit {
      @Input() configuration: ReadTimeConfig = {
        wordsPerMinute: 200
      }
      constructor(private el: ElementRef) { }
      ngOnInit() {
        const text = this.el.nativeElement.textContent;
      }
    }
  5. Now that we have our text variable filled up with the element's entire text content, we can calculate the time to read this text. For this, we'll create a method named calculateReadTime by passing the text property to it, as follows:
    ...
    export class ReadTimeDirective implements OnInit {
      ...
      ngOnInit() {
        const text = this.el.nativeElement.textContent;
        const time = this.calculateReadTime(text);
      }
      calculateReadTime(text: string) {
        const wordsCount = text.split(/\s+/g).length;
        const minutes = wordsCount / this.configuration.    wordsPerMinute;
        return Math.ceil(minutes);
      }
    }
  6. We've got the time now in minutes, but it's not in a user-readable format at the moment since it is just a number. We need to show it in a way that is understandable for the end user. To do so, we'll do some minor calculations and create an appropriate string to show on the user interface (UI). The code is shown here:
    ...
    @Directive({
      selector: '[appReadTime]'
    })
    export class ReadTimeDirective implements OnInit {
    ...
      ngOnInit() {
        const text = this.el.nativeElement.textContent;
        const time = this.calculateReadTime(text);
        const timeStr = this.createTimeString(time);
        console.log(timeStr);
      }
    ...
      createTimeString(timeInMinutes) {
        if (timeInMinutes === 1) {
          return '1 minute';
        } else if (timeInMinutes < 1) {
          return '< 1 minute';
        } else {
          return `${timeInMinutes} minutes`;
        }
      }
    }

    Note that with the code so far, you should be able to see the minutes on the console when you refresh the application.

  7. Now, let's add an @Output() to the directive so that we can get the read time in the parent component and display it on the UI. Let's add it as follows in the read-time.directive.ts file:
    import { Directive, Input, ElementRef, OnInit, Output, EventEmitter } from '@angular/core';
    ...
    export class ReadTimeDirective implements OnInit {
      @Input() configuration: ReadTimeConfig = {
        wordsPerMinute: 200
      }
      @Output() readTimeCalculated = new   EventEmitter<string>();
      constructor(private el: ElementRef) { }
    ...
    }
  8. Let's use the readTimeCalculated output to emit the value of the timeStr variable from the ngOnInit() method when we've calculated the read time:
    ...
    export class ReadTimeDirective {
    ...
      ngOnInit() {
        const text = this.el.nativeElement.textContent;
        const time = this.calculateReadTime(text);
        const timeStr = this.createTimeString(time);
        this.readTimeCalculated.emit(timeStr);
      }
    ...
    }
  9. Since we emit the read-time value using the readTimeCalculated output, we have to listen to this output's event in the app.component.html file and assign it to a property of the AppComponent class so that we can show this on the view. But before that, we'll create a local property in the app.component.ts file to store the output event's value, and we'll also create a method to be called upon when the output event is triggered. The code is shown here:
    ...
    export class AppComponent {
      readTime: string;
      onReadTimeCalculated(readTimeStr: string) {
        this.readTime = readTimeStr;
      } 
    }
  10. We can now listen to the output event in the app.component.html file, and we can then call the onReadTimeCalculated method when the readTimeCalculated output event is triggered:
    ...
    <div class="content" role="main" id="mainContent" appReadTime (readTimeCalculated)="onReadTimeCalculated($event)">
    ...
    </div>
  11. Now, we can finally show the read time in the app.component.html file, as follows:
    <div class="content" role="main" id="mainContent" appReadTime (readTimeCalculated)="onReadTimeCalculated($event)">
      <h4>Read time = {{readTime}}</h4>
      <p class="text-content">
        Silent sir say desire fat him letter. Whatever     settling goodness too and honoured she building     answered her. ...
      </p>
    ...
    </div>

How it works…

The appReadTime directive is at the heart of this recipe. We use the ElementRef service inside the directive to get the native element that the directive is attached to, then we take out its text content. The only thing that remains then is to perform the calculation. We first split the entire text content into words by using the /\s+/g regular expression (regex), and thus we count the total words in the text content. Then, we divide the word count by the wordsPerMinute value we have in the configuration to calculate how many minutes it would take to read the entire text. Easy peasy, lemon squeezy.

See also

Creating a basic directive that allows you to vertically scroll to an element

In this recipe, you'll create a directive to allow the user to scroll to a particular element on the page, on click.

Getting ready

The project for this recipe resides in chapter02/start_here/ng-scroll-to-directive:

  1. Open the project in VS Code.
  2. Open the terminal, and run npm install to install the dependencies of the project.
  3. Once done, run ng serve -o.

    This should open the app in a new browser tab, and you should see something like this:

Figure 2.3 – ng-scroll-to-directive app running on http://localhost:4200

Figure 2.3 – ng-scroll-to-directive app running on http://localhost:4200

How to do it…

  1. First off, we'll create a scroll-to directive so that we can enhance our application with smooth scrolls to different sections. We'll do this using the following command in the project:
    ng g directive directives/scroll-to
  2. Now, we need to make the directive capable of accepting an @Input() that'll contain the Cascading Style Sheets (CSS) Query Selector for our target section that we'll scroll to upon the element's click event. Let's add the input as follows to our scroll-to.directive.ts file:
    import { Directive, Input } from '@angular/core';
    @Directive({
      selector: '[appScrollTo]'
    })
    export class ScrollToDirective {
      @Input() target = '';
      constructor() { }
    }
  3. Now, we'll apply the appScrollTo directive to the links in the app.component.html file along with the respective targets so that we can implement the scroll logic in the next steps. The code should look like this:
    ...
    <div class="content" role="main">
      <div class="page-links">
        <h4 class="page-links__heading">
          Links
        </h4>
        <a class="page-links__link" appScrollTo     target="#resources">Resources</a>
        <a class="page-links__link" appScrollTo     target="#nextSteps">Next Steps</a>
        <a class="page-links__link" appScrollTo     target="#moreContent">More Content</a>
        <a class="page-links__link" appScrollTo     target="#furtherContent">Further Content</a>
        <a class="page-links__link" appScrollTo     target="#moreToRead">More To Read</a>
      </div>
      ...
      <div class="to-top-button">
        <a appScrollTo target="#toolbar" class=    "material-icons">
          keyboard_arrow_up
        </a>
      </div>
    </div>
  4. Now, we'll implement the HostListener() decorator to bind the click event to the element the directive is attached to. We'll just log the target input when we click the links. Let's implement this, and then you can try clicking on the links to see the value of the target input on the console:
    import { Directive, Input, HostListener } from '@angular/core';
    @Directive({
      selector: '[appScrollTo]'
    })
    export class ScrollToDirective {
      @Input() target = '';
      @HostListener('click')
      onClick() {
        console.log(this.target);
      }
      ...
    }
  5. Since we have the click handler set up already, we can now implement the logic to scroll to a particular target. For that, we'll use the document.querySelector method, using the target variable's value to get the element, and then the Element.scrollIntoView() web API to scroll the target element. With this change, you should have the page being scrolled to the target element already when you click the corresponding link:
    ...
    export class ScrollToDirective {
      @Input() target = '';
      @HostListener('click')
      onClick() {
        const targetElement = document.querySelector     (this.target);
        targetElement.scrollIntoView();
      }
      ...
    }
  6. All right—we got the scroll working. "But what's new, Ahsan? Isn't this exactly what we were already doing with the href implementation before?" Well, you're right. But, we're going to make the scroll super smoooooth. We'll pass scrollIntoViewOptions as an argument to the scrollIntoView method with the {behavior: "smooth"} value to use an animation during the scroll. The code should look like this:
    ...
    export class ScrollToDirective {
      @Input() target = '';
      @HostListener('click')
      onClick() {
        const targetElement = document.querySelector     (this.target);
        targetElement.scrollIntoView({behavior: 'smooth'});
      }
      constructor() { }
    }

How it works…

The essence of this recipe is the web API that we're using within an Angular directive, and that is Element.scrollIntoView(). We first attach our appScrollTo directive to the elements that should trigger scrolling upon clicking them. We also specify which element to scroll to by using the target input for each directive attached. Then, we implement the click handler inside the directive with the scrollIntoView() method to scroll to a particular target, and to use a smooth animation while scrolling, we pass the {behavior: 'smooth'} object as an argument to the scrollIntoView() method.

There's more…

Writing your first custom structural directive

In this recipe, you'll write your first custom structural directive named *appIfNot that will do the opposite of what *ngIf does—that is, you'll provide a Boolean value to the directive, and it will show the content attached to the directive when the value is false, as opposed to how the *ngIf directive shows the content when the value provided is true.

Getting ready

The project for this recipe resides in chapter02/start_here/ng-if-not-directive:

  1. Open the project in VS Code.
  2. Open the terminal, and run npm install to install the dependencies of the project.
  3. Once done, run ng serve -o.

    This should open the app in a new browser tab, and you should see something like this:

Figure 2.4 – ng-if-not-directive app running on http://localhost:4200

Figure 2.4 – ng-if-not-directive app running on http://localhost:4200

How to do it…

  1. First of all, we'll create a directive using the following command in the project root:
    ng g directive directives/if-not
  2. Now, instead of the *ngIf directive in the app.component.html file, we can use our *appIfNot directive. We'll also reverse the condition from visibility === VISIBILITY.Off to visibility === VISIBILITY.On, as follows:
    ...
    <div class="content" role="main">
      ...
      <div class="page-section" id="resources"   *appIfNot="visibility === VISIBILITY.On">
        <!-- Resources -->
        <h2>Content to show when visibility is off</h2>
      </div>
    </div>
  3. Now that we have set the condition, we need to create an @Input inside the *appIfNot directive that accepts a Boolean value. We'll use a setter to intercept the value changes and will log the value on the console for now:
    import { Directive, Input } from '@angular/core';
    @Directive({
      selector: '[appIfNot]'
    })
    export class IfNotDirective {
      constructor() { }
      @Input() set appIfNot(value: boolean) {
        console.log(`appIfNot value is ${value}`);
      }
    }
  4. If you tap on the Visibility On and Visibility Off buttons now, you should see the values being changed and reflected on the console, as follows:
    Figure 2.5 – Console logs displaying changes for the appIfNot directive values

    Figure 2.5 – Console logs displaying changes for the appIfNot directive values

  5. Now, we're moving toward the actual implementation of showing and hiding the content based on the value being false and true respectively, and for that, we first need the TemplateRef service and the ViewContainerRef service injected into the constructor of if-not.directive.ts. Let's add these, as follows:
    import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
    @Directive({
      selector: '[appIfNot]'
    })
    export class IfNotDirective {
      constructor(private templateRef: TemplateRef<any>,   private viewContainerRef: ViewContainerRef) { }
      @Input() set appIfNot(value: boolean) {
        console.log(`appIfNot value is ${value}`);
      }
    }
  6. Finally, we can add the logic to add/remove the content from the DOM based on the appIfNot input's value, as follows:
    ...
    export class IfNotDirective {
      constructor(private templateRef: TemplateRef<any>,   private viewContainerRef: ViewContainerRef) { }
      @Input() set appIfNot(value: boolean) {
        if (value === false) {
          this.viewContainerRef.      createEmbeddedView(this.templateRef);
        } else {
          this.viewContainerRef.clear()
        }
      }
    }

How it works…

Structural directives in Angular are special for multiple reasons. First, they allow you to manipulate DOM elements—that is, adding/removing/manipulating based on your needs. Moreover, they have this * prefix that binds to all the magic Angular does behind the scenes. As an example, *ngIf and *ngFor are both structural directives that behind the scenes work with the <ng-template> directive containing the content you bind the directive to and create the required variables/properties for you in the scope of ng-template. In the recipe, we do the same. We use the TemplateRef service to access the <ng-template> directive that Angular creates for us behind the scenes, containing the host element on which our appIfNot directive is applied. Then, based on the value provided to the directive as input, we decide whether to add the magical ng-template to the view or clear the ViewContainerRef service to remove anything inside it.

See also

How to use *ngIf and *ngSwitch together

In certain situations, you might want to use more than one structural directive on the same host—for example, a combination of *ngIf and *ngFor together. In this recipe, you'll learn how to do exactly that.

Getting ready

The project we are going to work with resides in chapter02/start_here/multi-structural-directives, inside the cloned repository:

  1. Open the project in VS Code.
  2. Open the terminal, and run npm install to install the dependencies of the project.
  3. Once done, run ng serve -o.

    This should open the app in a new browser tab, and you should see something like this:

Figure 2.6 – multi-structural-directives app running on http://localhost:4200

Figure 2.6 – multi-structural-directives app running on http://localhost:4200

Now that we have the app running, let's see the steps for this recipe in the next section.

How to do it…

  1. We'll start by moving the element with the No items in bucket. Add some fruits! text into its own <ng-template> element, and we'll give it a template variable called #bucketEmptyMessage. The code should look like this in the app.component.html file:
    …
    <div class="content" role="main">
     ...
      <div class="page-section">
        <h2>Bucket <i class="material-icons">shopping_cart     </i></h2>
        <div class="fruits">
          <div class="fruits__item" *ngFor="let item of       bucket;">
            <div class="fruits__item__title">{{item.name}}        </div>
            <div class="fruits__item__delete-icon"         (click)="deleteFromBucket(item)">
              <div class="material-icons">delete</div>
            </div>
          </div>
        </div>
      </div>
      <ng-template #bucketEmptyMessage>
        <div class="fruits__no-items-msg">
          No items in bucket. Add some fruits!
        </div>
      </ng-template>
    </div>
  2. Notice that we moved the entire div out of the .page-section div. Now, we'll use the ngIf-Else syntax to either show a bucket list or an empty bucket message based on the bucket's length. Let's modify the code, as follows:
    ...
    <div class="content" role="main">
      ...
      <div class="page-section">
        <h2>Bucket <i class="material-icons">shopping_cart     </i></h2>
        <div class="fruits">
          <div *ngIf="bucket.length > 0; else       bucketEmptyMessage" class="fruits__item"       *ngFor="let item of bucket;">
            <div class="fruits__item__title">{{item.name}}        </div>
            <div class="fruits__item__delete-icon"         (click)="deleteFromBucket(item)">
              <div class="material-icons">delete</div>
            </div>
          </div>
        </div>
      </div>
    ...
    </div>

    As soon as you save the preceding code, you'll see the application breaks, mentioning we can't use multiple template bindings on one element. This means we can't use multiple structural directives on one element:

    Figure 2.7 – Error on console, showing we can't use multiple directives on one element

    Figure 2.7 – Error on console, showing we can't use multiple directives on one element

  3. Now, as a final step, let's fix the issue by wrapping the div with *ngFor="let item of bucket;" inside an <ng-container> element and using the *ngIf directive on the <ng-container> element, as follows:
    ...
    <div class="content" role="main">
      ...
      <div class="page-section">
        <h2>Bucket <i class="material-icons">shopping_cart     </i></h2>
        <div class="fruits">
          <ng-container *ngIf="bucket.length > 0; else       bucketEmptyMessage">
            <div class="fruits__item" *ngFor="let item         of bucket;">
              <div class="fruits__item__title">{{item.          name}}</div>
              <div class="fruits__item__delete-icon"           (click)="deleteFromBucket(item)">
                <div class="material-icons">delete</div>
              </div>
            </div>
          </ng-container>
        </div>
      </div>
    </div>

How it works…

Since we can't use two structural directives on a single element, we can always use another HTML element as a parent to use the other structural directive. However, that adds another element to the DOM and might cause problems for your element hierarchy, based on your implementation. <ng-container>, however, is a magical element from Angular's core that is not added to the DOM. Instead, it just wraps the logic/condition that you apply to it, which makes it really easy for us to just add a *ngIf or *ngSwitchCase directive on top of your existing elements.

See also

Enhancing template type checking for your custom directives

In this recipe, you'll learn how to improve type checking in templates for your custom Angular directives using the static template guards that the recent versions of Angular have introduced. We'll enhance the template type checking for our appHighlight directive so that it only accepts a narrowed set of inputs.

Getting ready

The project we are going to work with resides in chapter02/start_here/enhanced-template-type-checking, inside the cloned repository:

  1. Open the project in VS Code.
  2. Open the terminal, and run npm install to install the dependencies of the project.
  3. Once done, run ng serve -o.

    This should open the app in a new browser tab, and you should see something like this:

Figure 2.8 – enhanced-template-type-checking app running on http://localhost:4200

Figure 2.8 – enhanced-template-type-checking app running on http://localhost:4200

Now that we have the app running, let's see the steps for this recipe in the next section.

How to do it…

  1. First off, we'll try to identify the problem, and that boils down to the ability to pass any string as a color to the highlightColor attribute/input for the appHighlight directive. Give it a try. Provide the '#dcdcdc' value as the input and you'll have a broken highlight color, but no errors whatsoever:
    ...
    <div class="content" role="main">
      ...
      <p class="text-content" appHighlight   [highlightColor]="'#dcdcdc'"   [highlightText]="searchText">
        ...
      </p>
    </div>
  2. Well, how do we fix it? By adding some angularCompileOptions to our tsconfig.json file. We'll do this by adding a flag named strictInputTypes as true. Stop the app server, modify the code as follows, and rerun the ng serve command to see the changes:
    {
      "compileOnSave": false,
      "compilerOptions": {
        ...
      },
      "angularCompilerOptions": {
        "strictInputTypes": true
      }
    }

    You should see something like this:

    Figure 2.9 – strictInputTypes helping with build time errors for incompatible type

    Figure 2.9 – strictInputTypes helping with build time errors for incompatible type

  3. Well, great! Angular now identifies that the provided '#dcdcdc' value is not assignable to the HighlightColor type. But what happens if someone tries to provide null as the value? Would it still be fine? The answer is no. We would still have a broken experience, but no error whatsoever. To fix this, we'll enable two flags for our angularCompilerOptionsstrictNullChecks and strictNullInputTypes:
    {
      "compileOnSave": false,
      "compilerOptions": {
        ...
      },
      "angularCompilerOptions": {
        "strictInputTypes": true,
        "strictNullChecks": true,
        "strictNullInputTypes": true
      }
    }
  4. Update the app.component.html file to provide null as the value for the [highlightColor] attribute, as follows:
    ...
    <div class="content" role="main">
      ...
      <p class="text-content" appHighlight   [highlightColor]="null" [highlightText]="searchText">
       ...
    </div>
  5. Stop the server, save the file, and rerun ng serve, and you'll see that we now have another error, as shown here:
    Figure 2.10 – Error reporting with strictNullInputTypes and strictNullChecks in action

    Figure 2.10 – Error reporting with strictNullInputTypes and strictNullChecks in action

  6. Now, instead of so many flags for even further cases, we can actually just put two flags that do all the magic for us and cover most of our applications—the strictNullChecks flag and the strictTemplates flag:
    {
      "compileOnSave": false,
      "compilerOptions": {
       ...
      },
      "angularCompilerOptions": {
        "strictNullChecks": true,
        "strictTemplates": true
      }
    }
  7. Finally, we can import the HighlightColor enum into our app.component.ts file. We will add a hColor property to the AppComponent class and will assign it a value from the HighlightColor enum, as follows:
    import { Component } from '@angular/core';
    import { HighlightColor } from './directives/highlight.directive';
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
      searchText = '';
      hColor: HighlightColor = HighlightColor.LightCoral;
    }
  8. We'll now use the hColor property in the app.component.html file to pass it to the appHighlight directive. This should fix all the issues and make light coral the assigned highlight color for our directive:
    <div class="content" role="main">
    ...
      <p class="text-content" appHighlight   [highlightColor]="hColor" [highlightText]="searchText">
        ...
      </p>
    </div>

See also

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Explore recipes across core Angular topics to fill gaps in your knowledge of using Angular in production
  • Discover industry best practices and tooling to enhance your development experience with Angular
  • Understand advanced topics in Angular to help you become a proficient enterprise web developer

Description

The Angular framework, powered by Google, is the framework of choice for many web development projects built across varying scales. It’s known to provide much-needed stability and a rich tooling ecosystem for building production-ready web and mobile apps. This recipe-based guide enables you to learn Angular concepts in depth using a step-by-step approach. You’ll explore a wide range of recipes across key tasks in web development that will help you build high-performance apps. The book starts by taking you through core Angular concepts such as Angular components, directives, and services to get you ready for building frontend web apps. You’ll develop web components with Angular and go on to cover advanced concepts such as dynamic components loading and state management with NgRx for achieving real-time performance. Later chapters will focus on recipes for effectively testing your Angular apps to make them fail-safe, before progressing to techniques for optimizing your app’s performance. Finally, you’ll create Progressive Web Apps (PWA) with Angular to provide an intuitive experience for users. By the end of this Angular book, you’ll be able to create full-fledged, professional-looking Angular apps and have the skills you need for frontend development, which are crucial for an enterprise Angular developer.

What you will learn

  • Gain a better understanding of how components, services, and directives work in Angular
  • Understand how to create Progressive Web Apps using Angular from scratch
  • Build rich animations and add them to your Angular apps
  • Manage your app’s data reactivity using RxJS
  • Implement state management for your Angular apps with NgRx
  • Optimize the performance of your new and existing web apps
  • Write fail-safe unit tests and end-to-end tests for your web apps using Jest and Cypress
  • Get familiar with Angular CDK components for designing effective Angular components

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Aug 6, 2021
Length 652 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781838989439
Vendor :
Google

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want

Product Details

Publication date : Aug 6, 2021
Length 652 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781838989439
Vendor :
Google

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together

Stars icon
Total $ 68.95 98.97 30.02 saved
TypeScript 4 Design Patterns and Best Practices
$19.99 $28.99
Angular Cookbook
$20.98 $29.99
Angular Projects
$27.98 $39.99
=
Book stack Total $ 68.95 98.97 30.02 saved Stars icon

Table of Contents

15 Chapters
Preface Chevron down icon Chevron up icon
1. Chapter 1: Winning Components Communication Chevron down icon Chevron up icon
2. Chapter 2: Understanding and Using Angular Directives Chevron down icon Chevron up icon
3. Chapter 3: The Magic of Dependency Injection in Angular Chevron down icon Chevron up icon
4. Chapter 4: Understanding Angular Animations Chevron down icon Chevron up icon
5. Chapter 5: Angular and RxJS – Awesomeness Combined Chevron down icon Chevron up icon
6. Chapter 6: Reactive State Management with NgRx Chevron down icon Chevron up icon
7. Chapter 7: Understanding Angular Navigation and Routing Chevron down icon Chevron up icon
8. Chapter 8: Mastering Angular Forms Chevron down icon Chevron up icon
9. Chapter 9: Angular and the Angular CDK Chevron down icon Chevron up icon
10. Chapter 10: Writing Unit Tests in Angular with Jest Chevron down icon Chevron up icon
11. Chapter 11: E2E Tests in Angular with Cypress Chevron down icon Chevron up icon
12. Chapter 12: Performance Optimization in Angular Chevron down icon Chevron up icon
13. Chapter 13: Building PWAs with Angular Chevron down icon Chevron up icon
14. Other Books You May Enjoy Chevron down icon Chevron up icon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.