title: How do I hide angular material FormGroup from the dom until data is loaded from the background?
body: <p>I have simple webpage, containing a form group with few controls in it. Inside my ngOnInit method, I am making a get request to load some data from the sever. Until this data is loaded, I want to hide the form, and display it only after the data is loaded. 
  Here is my <code>.component.ts</code> file:</p>
  
  <pre><code>public formGroup = new FormGroup({
      firstName: new FormControl('', [
        Validators.required,
      ]),
      lastName: new FormControl('', [
        Validators.required,
      ]),
    });
  </code></pre>
  
  <p>Here is my <code>ngOnInit()</code> method:</p>
  
  <pre><code>ngOnInit() {
      this.route.params.pipe(mergeMap(params =&gt; {
        this.param1 = params['param'];
        this.hideForm();   //I want to implement this method
        return this.service.getInfo(this.param1);
      })).subscribe(data =&gt; {
  //this is the success case, i.e. I have loaded the data and obv I want to show the form
        this.formGroup.controls['firstName'].setValue(data.firstName);
        this.formGroup.controls['lastName'].setValue(data.lastName);
      }, err =&gt; {
        //in the error case the form should stay hidden
      });
    }
  </code></pre>
  
  <p>Part of my <code>component.html</code> file:</p>
  
  <pre><code>&lt;form [formGroup]="formGroup" (ngSubmit)="handleSubmit()"&gt;
    &lt;mat-form-field&gt;
      &lt;input matInput placeholder="Name" formControlName="firstName" required&gt;
    &lt;/mat-form-field&gt;
    &lt;mat-form-field&gt;
      &lt;input matInput placeholder="Surname" formControlName="lastName" required&gt;
    &lt;/mat-form-field&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I have read that I can remove/add controls from the form, but this seem unnecessary for my, to constantly adding and removing components instead of hiding them. Any ideas will be appreciated.</p>