Instead of creating your own scss variables, I would suggest copying base colours from Angular Material.

Let’s copy $primary and $accent colours from Angular Material:

@import "~@angular/material/theming";

// Copy colour palettes individually
$app-primary: mat-palette($mat-indigo);
$app-accent: mat-palette($mat-pink);

// Create variables to use in project
$primary: mat-color($app-primary);
$accent: mat-color($app-accent);

Assuming you’re working on a real project and not a hello-world app, you should consider creating a file to keep these variables.

src/assets/_variables.scss

As this is a new file, Angular compiler needs to know about it.

Go ahead and add it to the styles array in your angular.json:

"styles": [ 
    "src/assets/_variables.scss"
]

Finally, you can import the new variables file in any component and use $primary and $accent:

@import "./../../../assets/_variables";

.entry {
    background-color: $primary;
}

So there you have it! This is how I re-use colours from Angular Material to keep things consistent.

Do you know any other way to do this? Let me know in the comments below!

The post How to Use Angular Material Theme Colours in Your Components appeared first on onthecode.

Instead of the popular ElementRef solution, we will use Renderer2 to set focus on a form input. This approach is secure, easier to test and compatible with reactive forms.

Here’s a live demo on how to focus on form input in Angular Material:

Using ElementRef

First of all, I have seen many Angular examples that involve using ElementRef to get access to the native HTML element and calling focus(). The following is from a recent example I have seen from codeburst.

In this approach, you reference the HTML input element with ViewChild in typescript code.

ElementRef is included in Angular core library. It is a wrapper around native HTML elements.

The variable nameField above refers to a native HTML element, which we can manipulate in code.

Security Risks

ElementRef in Angular gives direct access to HTML DOM (Document Object Model). Allowing direct access to the DOM can make your application vulnerable to XSS attacks.

You should always avoid using ElementRef in Angular where possible.

Separation of concerns

Relying on ElementRef for HTML DOM operations like form input focus and blur creates tight coupling between the application and rendering layers. So if you wanted use web workers, it will be impossible to separate the application logic from DOM manipulation code.

Focusing input with Renderer2

Renderer2 is a service that comes with the core Angular package. It allows DOM manipulation in a safe way.

It’s a bit like jQuery for Angular.

Although, I have a reactive form below for demonstration, all you need is an input with a unique id.

<form [formGroup]="form">
  <mat-form-field class="full-width">
    <input matInput id="myInput" formControlName="myInput" placeholder="Focused Input">
  </mat-form-field>
  <br>
  <button mat-raised-button color="primary" (click)="focusMyInput()">Focus</button>
</form>

Inject Renderer 2 in the constructor and access the input element with selectRootElement() method.

Then, we can focus on the input using focus method:

constructor(private renderer: Renderer2) {}

focusMyInput() {
  this.renderer.selectRootElement('#myInput').focus();
}

In addition, you can focus on input element on load, using the ngAfterViewInit() hook.

ngAfterViewInit() {
  setTimeout(() => {

      var element = this.renderer.selectRootElement('#myInput');
      element.focus();

  }, 1000);
}

Another useful feature of Renderer2 is that you can listen for events on elements.

For example, you can subscribe to the focus and blur events of the input with listen() method.

In the code snippet below, we are grabbing the input element and subscribing to focus and blur events.

ngAfterViewInit() {
  setTimeout(() => {
      var elem = this.renderer.selectRootElement('#myInput');

      this.renderer.listen(elem, "focus", () => { console.log('focus') });

      this.renderer.listen(elem, "blur", () => { console.log('blur') });
  }, 1000);
}

It is important that you setup listeners in ngAfterViewInit() hook as the element won’t be initialised in ngOnInit().

There you have it! That’s how to set focus on form control with Renderer2 in Angular.

The post How to Set Focus on Form Control in Angular appeared first on onthecode.

With the Angular Material 7 release, an exciting feature we’ve been waiting for — drag and drop is available with the component dev kit.

In my previous article, I explained how to create a reusable confirm dialog with Angular Material. Today, we’ll learn how to make the dialog draggable. We will use the cdkDrag directive from the Component Dev Kit (CDK).

cdkDrag allows us to easily and declaratively create enable drag-and-drop functionality on components — no need to write custom directives!

Import DragDropModule

Let’s import DragDropModule from the CDK into the module where you want to use drag and drop. Since I am keeping the project structure clean with a custom feature module for Material components, I use the CustomMaterialModule for this. You can learn more about my project structure.

import { NgModule } from '@angular/core';
import { MatButtonModule, MatDialogModule } from '@angular/material';
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [
    MatButtonModule, MatDialogModule, DragDropModule
  ],
  exports: [
    MatButtonModule, MatDialogModule, DragDropModule
  ]
})
export class CustomMaterialModule {
}

Use cdkDrag

With the DragDropModule in the project, we’re ready to get things moving.

Modify html template of the dialog to add cdkDrag and cdkDragRootElement  directives.

<!-- confirm-dialog.component.html -->

<h1 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane">
  {{title}}
</h1>

<!-- rest of the dialog -->

That’s it! You can now move the dialog around using the title.

In most cases, cdkDrag is simply enough to make any div draggable. However, the dialog is injected into the DOM so we need to specifically tell Angular the root element to enable drag. For this reason, we pass cdk-overlay-pane class for cdkDragRootElement attribute because it is the root container of the dialog.

Add a drag handle

Although the dialog is draggable, it is also not obvious that the dialog can be dragged.

Let’s add an icon on the left hand-side of the title to draw the user’s attention.

1. Import the MatIconModule so that we can use material icon library.
2. Import Material font icons in index.html file.
3. Add a mat-icon element in the dialog title.

This is what the title looks like with a drag handle:

<h1 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
  <mat-icon>drag_handle</mat-icon>
  {{title}}
</h1>

Add some styling so that the icon looks nice next to the title:

.mat-dialog-title .mat-icon {
    top: 5px;
    position: relative;
    cursor: grab;
}

Here is the result:

Summary

In this article, we have seen how easy it is to make the Angular Material Dialog draggable with cdkDrag directive.

The post How to Make Angular Material Dialog Draggable with cdkDrag appeared first on onthecode.

In this post, you’ll learn how to implement select all option for mat-select from Angular Material.

Our solution will involve creating a custom component that will be embedded inside a select dropdown. It will also support indeterminate mode of checkbox, meaning our new option will show a different icon based on selected options.

Why do you need a select all option?

Angular Material select component has a multi-select feature, which allows users to check multiple options. Unfortunately, there is no way to display select all option out-of-the-box.

I can sometimes be useful to select/deselect all options in mat-select dropdown when there are several options. For example, a user may want to select all Projects in a dropdown. Instead of clicking one by one, they can save time by clicking a single option.

Therefore, we can build a re-usable select all option to make our users life easier!

Step #1: Create a component for select all option

Firstly, let’s generate a new component to make the select all logic reusable:

ng generate component select-check-all

Then, place a mat-checkbox inside the component template. This is the Select all option.

<mat-checkbox class="mat-option" [indeterminate]="isIndeterminate()"
[checked]="isChecked()" (click)="$event.stopPropagation()"
    (change)="toggleSelection($event)">
  {{text}}
</mat-checkbox>

After that, set the CSS class to mat-option so that its styling is consistent with other options in mat-select.

Using data-binding, we update the indeterminate and checked state of the checkbox. This is important to show an icon representing the state of the mat-select.

Moreover, the checkbox needs to have access to the mat-select. Using reactive forms, we will pass in the form control and the list of values to the checkbox.

Let’s take a look at the component implementation:

import { Component, Input, ViewEncapsulation } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatCheckboxChange } from '@angular/material';

@Component({
  selector: 'app-select-check-all',
  templateUrl: "./select-check-all.component.html",
  styleUrls: ['./select-check-all.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class SelectCheckAllComponent {
  @Input() model: FormControl;
  @Input() values = [];
  @Input() text = 'Select All'; 

  isChecked(): boolean {
    return this.model.value && this.values.length
      && this.model.value.length === this.values.length;
  }

  isIndeterminate(): boolean {
    return this.model.value && this.values.length && this.model.value.length && this.model.value.length < this.values.length;
  }

  toggleSelection(change: MatCheckboxChange): void {
    if (change.checked) {
      this.model.setValue(this.values);
    } else {
      this.model.setValue([]);
    }
  }
}

Notice we use @Input variables to pass the form control, selectable values and display text.

Finally, add the following styles so that the checkbox takes up full width.

app-select-check-all .mat-checkbox-layout,
app-select-check-all .mat-checkbox-label {
  width:100% !important;
}

Step #2: Embed custom component in a mat-select

At last, we can use the custom component to select all options within a mat-select.

Start by creating a form and add a mat-select with multiple selection.

Above the loop for generating options, add the app-select-check-all component. This way, our custom component will appear as the first item in the list.

Don’t forget to pass in the form control value and the full list of values into app-select-check-all component.

<form [formGroup]="form">
	<mat-form-field class="full-width">
		<mat-select placeholder="Projects" formControlName="project" multiple>
			<app-select-check-all [model]="form.get('project')" [values]="projects">
			</app-select-check-all>
			<mat-option *ngFor="let project of projects" [value]="project">{{ project.name }}</mat-option>
		</mat-select>
	</mat-form-field>
</form>

import { Component } from '@angular/core';
import { FormGroup, FormControl } from "@angular/forms";
import { Project } from "./project";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  projects:Project[];
  form: FormGroup;
  constructor() { 
    // Create sample projects
    this.projects = [
      new Project("Project 1"),
      new Project("Project 2")
    ]
    // Setup form
    this.form = new FormGroup({
      project: new FormControl(this.projects)      
    });
  }
}

Live demo

Here is a stackblitz project demonstrating select all option for mat-select:

Summary

In conclusion, you learned how to select all options in Angular Material Select with a custom checkbox component. This custom behaviour provides a way for user to quickly select all options.

Did you find this useful? Let me know in the comments below!

The post Select All Option for MatSelect appeared first on onthecode.

In this post, we’ll look at how to validate autocomplete component from Angular Material. Working with reactive forms, we’ll write a custom validator to force selection only from the list of options.

The autocomplete component is an input with a dropdown of suggested options. It allows the user to type into the input and filter list of options. Then, the user can choose an option.

Unfortunately, it does not validate text value against the list of options.

Create custom validator for autocomplete

Working with reactive forms, the easiest way to solve this issue is to write a custom form validator.

Firstly, let’s create a new file requireMatch.ts:

import { AbstractControl } from '@angular/forms';
export function RequireMatch(control: AbstractControl) {
    const selection: any = control.value;
    if (typeof selection === 'string') {
        return { incorrect: true };
    }
    return null;
}

This function evaluates the value of a control and return a validation error if the value is a string type.

In detail, AbstractControl parameter allows us to read the current value of any form control. If the type of value is just text, we return an error code incorrect. Otherwise, we return null to indicate no errors.

All form controls can make use of this validator function.

Use validator in form

We can now import the function into your component and pass it into the form control constructor.

In the snippet below, I created a simple FormGroup with an autocomplete control to select a project from a list. In addition to adding a required validator, we specify RequireMatch validator on the validators array.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Project } from './project';
import { RequireMatch as RequireMatch } from './requireMatch';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  form: FormGroup;
  projects: Project[] = [
      new Project("Web Development"),
      new Project("UX"),
      new Project("SEO")
    ];

  ngOnInit() {
    this.form = new FormGroup({
      project: new FormControl('', [Validators.required, RequireMatch]),
    });
  }
  displayWith(obj?: any): string | undefined {
    return obj ? obj.name : undefined;
  }
}

With the form group is configured, we are now able to display an error message in the template:

<form [formGroup]="form">
    <mat-form-field class="full-width">
        <input type="text" placeholder="Project" matInput formControlName="project"
 [matAutocomplete]="projectAutoComplete">
        <mat-autocomplete #projectAutoComplete="matAutocomplete" [displayWith]="displayWith">
            <mat-option *ngFor="let project of projects" [value]="project">
                {{ project.name }}
            </mat-option>
        </mat-autocomplete>
        <mat-error *ngIf="form.controls['project'].hasError('required')">
            Please enter a value
        </mat-error>
        <mat-error *ngIf="form.controls['project'].hasError('incorrect')">
            Please select a valid project
        </mat-error>
    </mat-form-field>
</form>

Source code is available on GitHub.

Summary

In summary, I explained how to implement a custom validator to force option selection for Angular Material autocomplete component. This validator basically makes the autocomplete a hybrid between a select and an autocomplete.

The post How to Force Selection in Angular Material Autocomplete appeared first on onthecode.

In this post, you’ll learn how to use Angular Material calendar component without date picker input. The calendar component allows date selection in a month view, which could be useful for a wide range of use cases such as booking forms.

In addition to displaying a calendar, we will validate user input and highlight dates on the calendar.

Date picker component

Material docs have extensive documentation on the date picker component. This is a component that renders an input to let the user select a date from a calendar popup.

While this is useful in a data-entry form, it is not always the best way to get date value from the user. It is sometimes necessary to display a calendar that is always open.

As there isn’t an official Material component that works as a stand-alone calendar, I decided to take a deeper look at how the date picker works internally..

I discovered that the date picker brings along an additional component: mat-calendar. This is the component that the user sees on interaction with the date input.

Good news for us is that it is fully-functional with data binding and events.

Calendar component

Please follow the getting started guide, if this is your first time working with Material UI components.

Once that is done, it is possible to use the calendar by using mat-calendar selector:

<div class="calendar-wrapper">
    <mat-calendar #calendar [(selected)]="selectedDate">
    </mat-calendar>
</div>

This will render the calendar component as below:

As the component has an id, ViewChild property decorator can access the calendar element:

 @ViewChild('calendar') calendar: MatCalendar<Moment>;
 selectedDate: Moment;

Calendar component events

As there is no documentation for this component, I had to figure things out myself.

It appears the calendar component has two events that we can listen to: selectedChange and monthSelected.

Event #1: selectedChange

This event fires when there is a change in date selection.

The event handler argument contains the wewly selected date object.

<mat-calendar #calendar [(selected)]="selectedDate" 
              (selectedChange)="dateChanged($event)">
</mat-calendar>

dateChanged(date) {
  alert(`Selected: ${date}`);
}

Event #2: monthSelected

As the name suggests this event fires when the user changes the currently displayed month.

Similarly, the event argument contains the newly selected date object.

<mat-calendar #calendar [(selected)]="selectedDate" 
              (monthSelected)="monthSelected($event)">
</mat-calendar>

monthSelected(date) {
  alert(`Selected: ${date}`);
}

Unfortunately, this event does not fire when the user interacts with arrow buttons.

If you need to access these button clicks, I recommend using the Renderer2 service for wiring-up event handlers. Renderer2 is a WebWorker safe way to manipulate DOM.

In this case, selected month can be extracted from the activeDate property.

ngAfterViewInit() {
  const buttons = document
   .querySelectorAll('.mat-calendar-previous-button, .mat-calendar-next-button');
  
  if (buttons) {
    Array.from(buttons).forEach(button => {
      this.renderer.listen(button, 'click', () => {
        alert('Arrow buttons clicked');
        // this.calendar.activeDate;
      });
    });
  }
}

How to validate date selection

While displaying a calendar is great, we need a way to validate input. It is not uncommon to validate selection in a calendar control, such as restricting selection to a date range.

The date picker allows us to set min and max dates for validation, which disables invalid dates in the calendar popup. How can we do the same in the calendar control?

Having looked at the source code for MatCalendar, it appears to have minDate and maxDate properties.

It turns out these properties also support data binding so we can implement calendar validation using regular typescript variables.

// from docs
export declare class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDestroy, OnChanges {
    //......
    /** The minimum selectable date. */
    minDate: D | null;
    private _minDate;
    /** The maximum selectable date. */
    maxDate: D | null;
    private _maxDate;
    //.....
}

Here I am binding component variables to minDate and maxDate properties so that the calendar updates itself to limit the selectable date range:

<mat-calendar #calendar [minDate]="minDate" [maxDate]="maxDate"></mat-calendar>

How to highlight dates on the calendar

Going beyond the simple input validation, you may be wondering how to highlight specific days on the calendar.

For example, a booking form with a calendar would highlight days that are available. This would draw the attention of the user to those dates.

We can use the Renderer2 service to manipulate the HTML output of the calendar component. This allows us to add and remove CSS classes and attributes.

  /**
   * Method to highlight certain days on the calendar.
   * This should be used when month selection changes.
   * 
   * @param days: Array of strings in the format "February 20, 2020"
   */
  private highlightDays(days: string[]) {
    const dayElements = document.querySelectorAll(
      'mat-calendar .mat-calendar-table .mat-calendar-body-cell'
    );

    Array.from(dayElements).forEach((element) => {
      const matchingDay = days.find((d) => d === element.getAttribute('aria-label')) !== undefined;

      if (matchingDay) {
        this.renderer.addClass(element, 'available');
        this.renderer.setAttribute(element, 'title', 'Event 1');
      } else {
        this.renderer.removeClass(element, 'available');
        this.renderer.removeAttribute(element, 'title');
      }
    });
  }

Detailed explanation of how the method above works:

1. Retrieve all HTML elements that represent a day in current month view
2. Filter out the days we are not interested in, by checking the value of aria-label
   1. The aria label contains the date in specific format: March 20, 2019
3. Add a custom CSS class available to highlight a day

For the purpose of this demo, we can just use a hand-crafted array of dates to highlight couple of days in January 2022. If you need to get these dates from a backend service, you may need to find the current month and year visible on the calendar:

//// Get current month/year selected in calendar to facilitate backend call
const month = parseInt(this.calendar.activeDate.format('M'));
const year = parseInt(this.calendar.activeDate.format('Y'));
this.backendService.getAvailableDays(month, year); // Expected format: ["February 20, 2020"]

Finally, we just need to add styles to actually highlight the days:

::ng-deep .available .mat-calendar-body-cell-content{
    background-color: rgba(14, 152, 5, 0.25);
}

::ng-deep is necessary if you are not using the main styles.css of your Angular application.

How to disable dates on the calendar

Several readers have asked how to disable dates on the calendar component.

Following a similar approach to highlighting days, we can disable days using the Renderer2 service.

  /**
   * Method to disable certain days on the calendar.
   * This should be used when month selection changes.
   * 
   * @param days: Array of strings in the format "February 20, 2020"
   */
  private disableDays(days: string[]) {
    const dayElements = document.querySelectorAll(
      'mat-calendar .mat-calendar-table .mat-calendar-body-cell'
    );

    Array.from(dayElements).forEach((element) => {
      const matchingDay = days.find((d) => d === element.getAttribute('aria-label')) !== undefined;

      if (matchingDay) {
        this.renderer.setAttribute(element, 'disabled', '');
        this.renderer.setAttribute(element, 'title', 'Unavailable');
      } else {
        this.renderer.removeAttribute(element, 'disabled');
        this.renderer.removeAttribute(element, 'title');
      }
    });
  }

Again, we go through the HTML elements of the calendar and add disabled attribute to days we want to disable.

As each day in the calendar is actually a td element (not a button!), the disabled attribute has no effect on its own..

CSS can help us here. Using pointer-events, we disable the click event.

Also, let’s add a background-color to make disabled days more prominent.

::ng-deep .mat-calendar-body-cell[disabled]{
    pointer-events: none;
}
::ng-deep .mat-calendar-body-cell[disabled] .mat-calendar-body-cell-content {
    background-color: rgba(128, 128, 128, 0.637);
}

Custom Angular Material calendar component

Since we’re likely to add custom functionality around the calendar component, it makes a lot of sense to create a reusable component for it.

Generate a new component called Calendar. If your application has a shared module, the calendar should be placed there as you’re likely to use it across feature modules.

ng generate component Calendar

Add the necessary HTML markup of the mat-calendar component in the template:

<div class="calendar-wrapper">
  <button mat-button (click)="prevDay()">Prev</button>
  <button mat-button (click)="today()">Today</button>
  <button mat-button (click)="nextDay()">Next</button>

  <mat-calendar #calendar [minDate]="minDate" [maxDate]="maxDate" (monthSelected)="monthChanged($event)" [(selected)]="selectedDate"
    (selectedChange)="dateChanged()"></mat-calendar>

  <button (click)="setMinDate()">Set min date</button>
  <button (click)="setMaxDate()">Set max date</button>
</div>

I have added buttons above the calendar to demonstrate two-way binding. These buttons will set the current date of the calendar to previous day, today or next day.

Let’s also add some styling so that the calendar does not take up the full width of the page:

.calendar-wrapper {
    width: 300px;
    text-align: center;
}

Implement the calendar in the component as shown below.

import * as moment from 'moment';

import {
    AfterViewInit, Component, EventEmitter, Output, Renderer2, ViewChild
} from '@angular/core';
import { MatCalendar } from '@angular/material';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements AfterViewInit {
  selectedDate = moment();
  minDate: moment.Moment;
  maxDate: moment.Moment;

  @Output()
  dateSelected: EventEmitter<moment.Moment> = new EventEmitter();

  @Output()
  monthSelected: EventEmitter<moment.Moment> = new EventEmitter();

  @ViewChild('calendar', { static: true })
  calendar: MatCalendar<moment.Moment>;

  constructor(private renderer: Renderer2) { }

  setMinDate() {
    this.minDate = moment().add(-10, 'day');
  }

  setMaxDate() {
    this.maxDate = moment().add(10, 'day');
  }

  ngAfterViewInit() {
    this.setupArrowButtonListeners();
  }

  private setupArrowButtonListeners() {
    const buttons = document.querySelectorAll('.mat-calendar-previous-button, .mat-calendar-next-button');

    if (buttons) {
      Array.from(buttons).forEach(button => {
        this.renderer.listen(button, 'click', () => {
          this.monthSelected.emit(this.calendar.activeDate);
        });
      });
    }
  }

  monthChanged(date: moment.Moment) {
    this.monthSelected.emit(date);
  }

  dateChanged() {
    this.calendar.activeDate = this.selectedDate;
    this.dateSelected.emit(this.selectedDate);
  }

  prevDay() {
    const prevMoment = moment(this.selectedDate).add(-1, 'days');
    this.selectedDate = prevMoment;
    this.dateChanged();
  }

  today() {
    this.selectedDate = moment();
    this.dateChanged();
  }

  nextDay() {
    const nextMoment = moment(this.selectedDate).add(1, 'days');
    this.selectedDate = nextMoment;
    this.dateChanged();
  }
}

The component is pretty simple – we’ve put together a component that exposes a dateSelected event that fires whenever the selected date changes.

Here is how to use the calendar component:

<app-calendar (dateSelected)="dateSelected($event)" (monthSelected)="monthSelected($event)"></app-calendar>

import { Moment } from 'moment';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  dateSelected(value: Moment) {
    alert(value);
  }

  monthSelected(value: Moment) {
    alert(value);
  }
}

Summary

In this post, we got our hands dirty with the Angular Material calendar component. I have been using this in a real-world application for quite some time and haven’t had any issues yet. While the component is very helpful, I am not sure why the documentation does not mention it. If you know the answer, drop a comment below!

View code on GitHub

The post Calendar Component in Angular Material appeared first on onthecode.

It is a common requirement for any Angular application to prompt the user for a confirmation dialog. For instance, you may want to show a message when the user wants to delete a record or send an email. In this post, we will look at how we can implement a reusable component in Angular Material components.

Basic confirm dialog in JavaScript

Traditionally, web applications make use of the built-in JavaScript API to show confirm dialog as shown below.

However, the vanilla JavaScript dialogs are synchronous – meaning everything on the screen will freeze until the user responds, they can’t be customised visually and don’t support images.

// Display a confirmation prompt
var result = confirm("Are you sure?");

Angular Material confirm dialog

To overcome the limitations of the traditional approach, we can easily build a flexible confirmation dialog in Angular with a bit of help from the Material components.

Here is what we are going to build:

We will use the Dialog component of Angular Material library to display our confirm dialogs.

The dialog takes the focus away from the current window, and forces the browser to read the message. The following are the main features of this custom component:

• Asynchronous Behaviour: We want to show the dialog and subscribe to its result. This is very important as we don’t know when the user is going to respond. Asynchrony allows us to properly react to the response of the user.
• Flexibility: We want to customise the title & message of the confirm dialog so that we can display any message from anywhere in the application.

Check out the code on GitHub or view live demo here.

Import Angular Material components

First of all, you need to import Angular Material to your application. If you need help with this, check out my guide.

Once you have access to Material components, import ButtonModule and MatDialogModule.

import { NgModule } from '@angular/core';
import { MatButtonModule, MatDialogModule } from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule, MatDialogModule
  ],
  exports: [
    MatButtonModule, MatDialogModule
  ]
})
export class CustomMaterialModule {}

I am importing Material UI components to a feature module called CustomMaterialModule.

You can import them directly to the app.module.

Generate a component

Next, generate a component for the confirmation dialog using the following command:

ng generate component ConfirmDialog

This will automagically create your component and link it with your root app.module.

Open the app.module and add the newly-created component to the entryComponents array. This is so that the confirm dialog can be dynamically loaded into the view – read more about entry components.

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CustomMaterialModule } from './custom-material/custom-material.module';
import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';

@NgModule({
  declarations: [
    AppComponent,
    ConfirmDialogComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CustomMaterialModule
  ],
  providers: [],
  entryComponents: [ConfirmDialogComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Implement dialog features

Basically, we just want to show a heading, message and buttons to dismiss the dialog.

Here is what the template looks like:

<h1 mat-dialog-title>
  {{title}}
</h1>

<div mat-dialog-content>
  <p>{{message}}</p>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="onDismiss()">No</button>
  <button mat-raised-button color="primary" (click)="onConfirm()">Yes</button>
</div>

As you can see, this is a standard Material dialog implementation.

The component class to handle UI interaction is as follows:

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { Component, OnInit, Inject } from '@angular/core';

@Component({
  selector: 'app-confirm-dialog',
  templateUrl: './confirm-dialog.component.html',
  styleUrls: ['./confirm-dialog.component.css']
})
export class ConfirmDialogComponent {
  title: string;
  message: string;

  constructor(public dialogRef: MatDialogRef<ConfirmDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogModel) {
    // Update view with given values
    this.title = data.title;
    this.message = data.message;
  }
 
  onConfirm(): void {
    // Close the dialog, return true
    this.dialogRef.close(true);
  }

  onDismiss(): void {
    // Close the dialog, return false
    this.dialogRef.close(false);
  }
}

/**
 * Class to represent confirm dialog model.
 *
 * It has been kept here to keep it as part of shared component.
 */
export class ConfirmDialogModel {

  constructor(public title: string, public message: string) {
  }
}

The component just handles the events by closing the Material dialog with the selected result from the view.

ConfirmDialogModel is used to pass data into the dialog.

Display dialog on button click

Finally, we can show our custom confirmation dialog using the code below.

Since we use MatDialog component internally, we take in the MatDialog dependency in the constructor and show the confirm dialog on button click.

Subscribing to the afterClosed() event of the dialog means that we can get the result and update the view through data-binding.

Add a button to the view to trigger the dialog, and a label to show the response:

<button mat-raised-button color="primary" (click)="confirmDialog()">Confirm</button>
<br>
Response is: {{result}}

and the component for the functionality:

import { Component } from '@angular/core';
import { ConfirmDialogModel, ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
import { MatDialog } from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  result: string = '';

  constructor(public dialog: MatDialog) {}

  confirmDialog(): void {
    const message = `Are you sure you want to do this?`;

    const dialogData = new ConfirmDialogModel("Confirm Action", message);

    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      maxWidth: "400px",
      data: dialogData
    });

    dialogRef.afterClosed().subscribe(dialogResult => {
      this.result = dialogResult;
    });
  }
}

Summary

In conclusion, we looked at how we can create a reusable component in Angular to display confirmation dialogs. Similarly, this approach can be used to implement other types of dialogs such as alerts, date/time input dialogs & more.

Check out the code on GitHub.

The post Angular Material Confirm Dialog appeared first on onthecode.

In this post, I will show you how to add Angular Material components in an Angular application.

Importing UI components directly in the app.module increases the size of the module. The root module should be easy to maintain. Importing a button is not a great idea here.

For example, consider importing and configuring date picker in several feature modules. In this case, you can avoid duplication by having a single Material module.

Add Angular Material

First off, let’s add Angular Material to our project:

ng add @angular/material

This command installs Angular Material, the Component Dev Kit (CDK), Angular Animations.

It will ask these questions to setup Material according to your needs:

1. Choose a prebuilt theme name, or “custom” for a custom theme
2. Set up global Angular Material typography styles?
3. Set up browser animations for Angular Material?

Generate feature module

Generate a module for keeping Material components:

ng generate module CustomMaterial

This will not only create a new folder called custom-material but also a module definition for your imports.

Next, open up the module definition and import a button:

//custom-material.module.ts
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
  imports: [
    MatButtonModule
  ],
  exports: [
    MatButtonModule
  ]
})
export class CustomMaterialModule {}

Notice we need to export the button component, which makes it available to any module that imports the CustomMaterialModule.

The idea here is that our custom material module will be responsible for any configuration, custom components etc. It should only export things that are needed by consumer modules.

At this point, you can import CustomMaterialModule in any other module.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CustomMaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We can now use the button in a component:

<button mat-raised-button> Hello </button>

Going forward, you can just import the components from Angular Material into the CustomMaterialModule and use them in your own components.

For example, if you need to display icons, you need to import and export MatIconModule from the CustomMaterialModule.

Custom components

You will reap the benefits of this approach, when the time comes to implement a custom feature into any of the Material components.

For example, if you implement a select all option for Select component, you can easily create a custom component inside the CustomMaterialModule and export it for the whole app.

This way, you keep all related code in a single module, which makes it very easy to maintain the project.

Summary

To summarise, we looked at how you can add Angular Material as a feature module in an Angular app. Although this guide is focused on the Material library, the concept can be applied to any kind of UI framework. You could, for instance, import Kendo UI dependencies through a feature module.

The post How to Add Angular Material Components Correctly appeared first on onthecode.