CODEWITHSUNDEEP
angular
Kelyane
Kelyane

Reputation: 467

How to do Angular2 works in <body>?

I created this Plunker to show my current situation. In this example there is nothing wrong, but I would like <h1> in index.html also shows in the application.

Currently:

Hello Angular! v4.1.3
Hello World!!!

My intention result should be 

loading my name is Angular! v4.1.3
Hello Angular! v4.1.3
Hello World!!!

I know that I could remove and put this <h1> to any component, but it's not what I want and I need my application running in body. Does anyone have any idea?

Upvotes: 0

Views: 85

Answers (3)

Frank Modica
Frank Modica

Reputation: 10526

In this answer I showed how to use the app component's ViewContainerRef as a rendering target. When you call createComponent on it, the new component is created adjacent to the app component (directly inside the body tag).

export class AppComponent implements OnInit {
  constructor(
    public viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) { }

  ngOnInit() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(AppSecondaryComp);
    const componentRef = this.viewContainerRef.createComponent(componentFactory);
  }
}

Just make sure to register AppSecondaryComp in the entryComponents array of your module.

Does this work for you? app-secondary would be rendered right inside the body tag.

Upvotes: 1

Nehal
Nehal

Reputation: 13307

The <body> tag in the index.html is where Angular bootstraps initial component. Because it's a SPA, basically the whole application's view will be rendered within this <body> tag.

You have to make your desired changes in the template of the boostraping component, which is inside the src/app.ts file.

See the Plunker here

Upvotes: 0

A. Tim
A. Tim

Reputation: 3206

You can use <ng-content>, but not in "root" component (see https://github.com/angular/angular/issues/4946). For example, if in index.html you do

<body>
   <app>Loading...</app>
</body>

app.ts

@Component({
    selector: 'app',
    template: `
        <h2>Hello {{user.name}}</h2>
        <app-secondary><h3>Some content</h3></app-secondary>
    `
})

app-secondary.ts

@Component({
    selector: 'app-secondary',
    template: `
        <div>
            <h2>Hello World!!! </h2>
            <ng-content></ng-content>
        </div>
     `,
})

Rendered page will be:

<body>
    <app>
        <h2>Hello Angular! v4.1.3</h2>
        <app-secondary>
            <h2>Hello World!!! </h2>
            <h3>Some content</h3>
        </app-secondary>
    </app>
</body>

Upvotes: 0

Related Questions