Is there a way to make sure Angular 2 application is loaded?

Question

Because of a custom SPL that we have, we can't use a loader inside <app-root> tag or whatever the name of the root component is.

So, instead of this common figure:

<app-root>
    <p>loading...</p>
</app-root>

We have this figure:

<app-root></app-root>
.
.
.
<p>loading...</p>

Now I need a way to hide, or preferably remove loading from DOM after Angular is fully loaded. By fully loaded I'm talking about when Angular itself replaces the loading content of the root component.

I can't find a way to do that. What should I do?

Answer 1

I think you should see Angular Lifecycle hooks to see which hook handles best your situation (could be AfterViewInit, AfterContentInit...)

Otherwise, if you just need to setup a manual loading (something like "wait until http call has completed") then you should set a boolean property indicating loading state, something like this:

public class AppComponent implements OnInit {
  public isLoading = true;

  ngOnInit(http: HttpClient) {
    const vm = this;
    vm.http.get('something').subscribe(response => {
      vm.isLoading = false;
      // handle success
    }, error => {
      vm.isLoading = false
        // handle error
    });
  }
}

From a quick first view didn't see that your <p> is not inside Angular component, so probably you should remove it using javascript to manipulate DOM (you can do it normally even from a Component). I'll suggest you to move it inside the Component, unless you mustn't (just to handle it as an ElementRef or a normal ngIf directive)

Answer 2

How about

<p ngIf="isLoading">loading...</p>

and in your code

public class AppComponent implements OnInit{
public isLoading = true;

ngOnInit(){
 this.isLoading=false;
}
}

Answer 3

give your <p> tag an id and do the following:

export class appComponent implements OnInit{
     constructor(@Inject(DOCUMENT) private document: any) { }
      ngOnInit(){
        let p = this.document.getElementById("your<p>tagid");
        //remove it now i think this is valid
        // this.document.removeChild(p);
      }