Angular change variable on component load

Question

I have this ruote configuration:

const routes: Routes = [
    { path: 'score', component: ScoreComponent }
];

when the component score is loaded I want to change the value of a variable in parent component.

The variable title is located in parent component template:

<div class="wrapper">
    <app-header></app-header>
    <app-menu [variablesForMenu]='variablesForMenu'></app-menu>
    <div class="content-wrapper">
        <section class="content-header">            
            <h1>
                {{title}}
            </h1>
        </section>
        <section class="content">
            <router-outlet></router-outlet>
        </section>
    </div>
</div>

how can I do?

I would like to use EventEmitter but I do not know how

you can use this code to detect when the component loaded. <router-outlet (activate)='onActivate($event)'> this event fired when thecomponent loaded. And you can get the title via service beetwen parent component and score component. — Must.Tek
– Must.Tek, Commented May 12, 2017 at 13:52
I added three ways to do it where one of them is event emitter. — elzoy
– elzoy, Commented May 12, 2017 at 13:56
How can i use the third way? I do not have child component on template, it is loaded dinamically by router — andrean
– andrean, Commented May 12, 2017 at 14:12
If you're not importing child's component in parent's view, then event emitter isn't the right solution. I thought that by 'parent' you mean inserting one component into another. Well, if those component aren't related you need to use BehaviorSubject. — elzoy
– elzoy, Commented May 12, 2017 at 14:19
The code in child.component.ts should be: ngOnInit() { this.someService.em.next(true);} — andrean
– andrean, Commented May 13, 2017 at 8:18

elzoy · Accepted Answer · 2017-05-15 07:42:24Z

Three ways to do it:

Use BehaviorSubject, subscribe to it in parent and call next in child on init.

SomeService.service.ts

em: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

Parent.component.ts

variableToChange: any;
sub: Subscription;

constructor(someService: SomeService){}

ngOnInit() {
  sub.add(this.someService.em.subscribe(value => this.variableToChange = whatever));
}

Child.component.ts

constructor(someService: SomeService){}

ngOnInit() {
  this.someService.em.next(true);
}

Pass variable from parent to child as input, then in child on init change that variable.

Parent.component.ts

variableToChange: any;

Parent.component.html

<child [variable]="variableToChange"></child>

Child.component.ts

@Input() variable: any;

ngOnInit() {
  this.variable = 'whatever';
}

Use EventEmitter

Child.component.ts

@Output() em: EventEmitter<any> = new EventEmitter();

ngOnInit() {
  this.em.emit('something');
}

Parent.component.html

 <child (em)="setVariable($event)"></child>

Parent.component.ts

 variableToChange: any;

 setVariable(event) {
  this.variable = event; // event is emitted value
 }

Collectives™ on Stack Overflow

Angular change variable on component load

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related