How to pass @Input string from one component to another

Question

I am able to pass data from one component ts file to another component HTML file. Please refer the code shown below:

export class TestComponent {

  @Component({
    selector: 'app-data',
  })

  @Input() data : string;
}

And in my another component HTML file I am able to use it like as shown below:

<app-data [data] = "Hello"></app-data>

My question is instead of passing data from another component HTML file, I want to pass it from another component .ts file. I found solution using service and emitters but I want to do it using @Output().

Please let me know possible solution to do it.

Edit Use case:

I am trying to add a shared component which has some template in it. And the template gets updated based on the component where the template is used. There are lot of string messages that I am updating based on template requirement.

So the problem is if I pass all of the string from HTML, my code will look dirty. So I am looking for instead of passing it from HTML I want to pass it from ts file.

NOTE: Both component are at same level.

Answer 1

I don't know why you want that but you could do something like following.

Child.component.ts

@Component({
    selector: 'child',
    template: `{{data}}`
})
export class ChildComponent {
    data;
}

Parent.component.ts

@Component({
    selector: 'parent',
    template: `<child><child>`
})
export class ParentComponent implements AfterViewInit {
    // ViewChild lets you access your inner views.
    // But, be careful, it may take some time to initialize your view.
    @ViewChild(Child) childComponent: ChildComponent;

    // you have to do it within this life cycle method
    // so that you'll know your view is initialized.
    ngAfterViewInit() {
        this.childComponent.data = 'Hello World';
    }
}

Based on your use case

If you don't want to pass a lot of parameters through your template, you can define an input (let's call it settings) and pass a json object.

E.g.

Child.component.ts

export interface Settings {
    optionA: string;
    optionB: string;
    optionC: string;
}

@Component({
    selector: 'child',
    template: `{{settings?.optionA}}`
})
export class ChildComponent {
    @Input() settings: Settings;
}

Parent.component.ts

@Component({
    selector: 'parent',
    template: `<child [settings]="mySettings"><child>`
})
export class ParentComponent implements OnInit {
    mySettings: Settings;

    ngOnInit() {
       this.mySettings = {
           optionA: 'A',
           optionB: 'B',
           optionC: 'C'
       };
    }
}