Angular 6 how to make all input's Not editable element inside a form

Question

Is there a way to disable and make all fields non editable (input / mat-select / textfield / option/input/mat-checkbox etc) inside a Form

Answer 1

Since disabled attribute doesn't work on some components, what I did is - I set the pointer-events:none on the css to cover all the components inside the div content.

Here's my CSS code:

.disabledDiv {
      pointer-events: none;
      opacity: 0.4;   }

Here's my HTML:

And on my TS:

editData() {
    this.isActiveDiv = true;
  }