CODEWITHSUNDEEP
angular
Unknown developer
Unknown developer

Reputation: 5920

Root vs bootstrap component

I have the following query. Is always the root component in Angular Component tree the bootstrap one? Is there any possibility of another component, apart from the one which bootstraps, to be the root component?

So far, my understanding is there is one Component tree (no matter how many modules are there) and the bootstrap component inside the bootstrap module is the root of the above tree. Am I correct or not?

constructor(private app: ApplicationRef) {
    let element = this.app.components[0];
    console.log(element);
}

Does the above code log the root component? I thought this.app.components would include all the components of the component tree but it does not. Is there any way to get all of them programmatically?

Upvotes: 2

Views: 382

Answers (2)

Mohit
Mohit

Reputation: 1755

There can exist multiple bootstrapped component tree. That's the reason the bootstrap parameter can take an array of classes instead of single class.

From Angular's official doc (https://angular.io/guide/bootstrapping#the-bootstrap-array)

Each bootstrapped component is the base of its own tree of components. Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree

I have added a small plunkr to demonstrate multiple bootstrapped components. https://plnkr.co/edit/ChAl9N9O5cOcojNlKl0D?p=preview

app.ts

import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'child',
  template: `
    <div>
      <h2>Child Number {{count}}</h2>
    </div>
  `,
})
export class Child {

  static counter: number = 1;

  count: number;

  constructor() {
    this.count = Child.counter++;
  }
}

@Component({
  selector: 'my-app-1',
  template: `
    <div>
      <h2>Component Tree 1</h2>
      <child></child>
    </div>
  `,
})
export class App1 {
  constructor() {
  }
}

@Component({
  selector: 'my-app-2',
  template: `
    <div>
      <h2>Component Tree 2</h2>
      <child></child>
    </div>
  `,
})
export class App2 {
  constructor() {
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ Child, App1, App2 ],
  bootstrap: [ App1, App2 ]
})
export class AppModule {}

index.html

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <script type="text/javascript" charset="utf-8">
      window.AngularVersionForThisPlunker = 'latest'
    </script>
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/[email protected]/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/[email protected]/Reflect.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app-1>
    loading...
    </my-app-1>
    <my-app-2>
    loading...
    </my-app-2>
  </body>

</html>

Upvotes: 2

Antoniossss
Antoniossss

Reputation: 32507

No, components can be detached of eachother and does not have to compose a hierarchy tree.

Upvotes: 0

Related Questions