Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Specify @Input() parameter for Angular root component/module

I have 3 root components that get bootstrapped by the root AppModule.

How do you go about specifying an @Input() parameter to one of those components?

Neither

<app-modal [id]="'hard-coded value'"></app-modal>
<app-modal [id]="constantExportedByAppmodule"></app-modal>

are picked up by AppModalComponent:

@Input() id: string;

It is undefined.

like image 205
jenson-button-event Avatar asked Apr 21 '17 13:04

jenson-button-event


People also ask

Which of the below is used to specify the root component to be loaded?

html file you must specify the root component using it's selector (usually app-root ).

How do you specify the component is a member of an NgModule?

A component must belong to an NgModule in order for it to be usable by another component or application. To specify that a component is a member of an NgModule, you should list it in the declarations field of that NgModule.

What is AppComponent in Angular?

A bootstrapped component is an entry component that Angular loads into the DOM during the bootstrap process (application launch). Other entry components are loaded dynamically by other means, such as with the router. Angular loads a root AppComponent dynamically because it's listed by type in @NgModule. bootstrap .

Which of the following is the root component in Angular?

bootstrap — the root component that Angular creates and inserts into the index.


2 Answers

As far as I know, you can not pass @Input() to a bootstraped component.

But you can use another way to do that - pass the value as an attribute.

index.html :

<my-app myAttribute="myAttributeValue">
    <div>Loading...</div>
</my-app>

app.component.ts :

@Component({
    selector: 'my-app',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css']
})
export class AppComponent {
    constructor(private elementRef:ElementRef) {
        let myAttribute = this.elementRef.nativeElement.getAttribute('myAttribute');
    }
}
like image 186
Grégory Gossart Avatar answered Nov 16 '22 01:11

Grégory Gossart


As @Grégory Gossart said you can not pass @Input data as normal for bootstraped components.

It is because an @Input is expected to come from an angular component. So, If your root app is loaded/bootstraped directly in the HTML it has not reference of what Is gonna provide that @Input, I thought.

As good practice commented on many Angular docs, and probably because it specific behaviours, you should only bootstrap one root App. I think your option here is add a root app which you bootstrap and it imports your others(3) and use those as template in it. Then pass the @Input as normal. Really nothing special.

I think another option could be pass the data from an @Injectable to your root apps if you decide you need to bootstrap all them and need external data. But I feel it is more refered to specific purposes.

Edit: I took a time to find this blog I have read past day and reason why I said about @Injectable. So merits to the author, but interesting stuff. Providing external data when bootstrapping Angular 2

like image 29
Sam Avatar answered Nov 16 '22 01:11

Sam