If you’re using dynamically created components in Angular, you’ve probably found it difficult to pass information between the parent and child components when needed. You need to provide the info in the parent, and then inject it within the child component. While it’s not necessarily difficult to do, it results in a lot of extra boilerplate code. It would be so much better if we could just use the decorator like we’re used to. Well, guess what? Angular supports doing this exact thing as of version sixteen. In this post, I’ll show you how. Alright, let’s get to it. @Input https://youtu.be/MT2JP8pn1qU?embedable=true Passing Data the Old Way Using the Angular Injector First, let’s look at how we used to pass data to dynamically created components from the parent. Here, in this example, within the component template, we have our , and we’re passing it to our player component. *ngComponentOutlet In this case, we’re also passing a custom child injector, and this is how we’d inject the data for the child component before. main.ts @Component({
    selector: 'app-root',
    template: `
        <ng-container *ngComponentOutlet="playerComponent; injector: childInjector"></ng-container>
    `
})
export class App {
    protected playerComponent = PlayerComponent;
} And to create this child injector, we needed to create a property so that it could be set and then used within the template. export class App {
    protected childInjector?: Injector;
    ...
} Then, we needed to inject in the Injector from the angular core within the constructor. export class App {
    ...
    constructor(private injector: Injector) {
    }
} After that, we needed to set the child injector using the create method and the providers’ array to provide our player token to the child. export class App {
    ...
    constructor(private injector: Injector) {
        this.childInjector = Injector.create({
            providers: [
                { provide: PlayerToken, useValue: this.player }
            ],
            parent: this.injector
        });
    }
} And finally, over in the child component, our player component, we needed to set our player property with the inject method from the angular core. player.component.ts export class PlayerComponent {
    protected player?: Player = inject(PlayerToken);
} So, all of this is just to pass a simple player object to a dynamic component. I mean, if this wasn’t a dynamic component, we’d simply make this an and just bind the player data object to the in the parent. But this is a dynamically created component, so we can’t do this, right? @Input @Input Well, as of Angular sixteen, we actually can use s instead, and it’s much simpler than what we’ve seen so far. @Input Passing Data the New Way Using the Inputs Object *ngComponentOutlet We start by changing this player property to an instead. And, it’s simply typed into our player interface. @Input player.component.ts export class PlayerComponent {
    @Input() player?: Player;
} Now, we can remove the inject method and player token imports since they’re no longer needed. Then, back over in our parent, in the template, we can remove the injector, and instead, replace it with an inputs object. We can pass this object on any number of inputs. So, if we had five inputs, we’d just include their names, and then pass each one whatever data we need. But in this case, we have only one input on our child component, player, so that’s all we need to pass it. main.ts @Component({
    selector: 'app-root',
    template: `
        <ng-container *ngComponentOutlet="playerComponent; inputs: { player }"></ng-container>
    `
}) Now, we can remove the child injector. This means we can also remove the constructor altogether. And finally, we can remove the Injector from the angular core and the player token import since we’re no longer using them. export class App {
    protected player: Player = {
        name: 'LeBron James',
        games: 1421,
        points: 38652,
        fieldGoalPercentage: 0.505,
        threePointPercentage: 0.345,
        imageName: 'lebron-james'
  };
  protected playerComponent = PlayerComponent;
} And that’s it. We can see everything works just as it used to. So, quite a bit easier to pull off and less code too which is always great. One bummer though is that while s are supported, s aren’t. Kind of a bummer, but it is what it is. Hopefully, they’ll add support in the future because this would be very handy as well, but we’ll just have to wait and see. @Input @Output Want to See It in Action? Check out the demo code and examples of these techniques in the Stackblitz example below. If you have any questions or thoughts, don’t hesitate to leave a comment. https://stackblitz.com/edit/stackblitz-starters-9xzkkf?ctl=1&embed=1&file=src%2Fmain.ts&embedable=true

Too Long; Didn't Read

Making security fun one episode at a time

How to Use Angular @Input to Pass Data to Dynamically Created Components

Too Long; Didn't Read

Brian Treese

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Use Angular @Input to Pass Data to Dynamically Created Components

Too Long; Didn't Read

Brian Treese

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES