Update component when input changes in Angular - html

Question

<div class=" card-body">
<div class="row">
<div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6" routerLinkActive="active"
*ngFor="let subject of subjects">
<div class=" font-icon-detail">
<div (click)="setSubject(subject.title)" >
<i class="deep-icons {{ subject.icon }}"></i>
<p>{{ subject.title }}</p>
</div>
</div>
</div>
</div>
</div>
<subject-component [setSubjectService]="selectedSubject"></subject-component>
The code above is from my selector.component.html.
export class SubjectComponent implements OnInit {
#Input() public set setSubjectService(_subjectService: ISubjectService) {
this.subjectService = _subjectService;
}
public subjectService: ISubjectService;
constructor() {}
public ngOnInit(): void {
}
}
The code above is from my subject.component.ts
Right now subject-component gets rendered once when the application starts up, but whenever "selectedSubject" changes it does not update or re-render. How can I make this possible?
(Using Angular 8)

Answer 1

I think you want to use two way binding.
If so;
Create an output with eventemitter like;
#Input() myVariable: number;
#Output() myVariableChange = new EventEmitter(); //define it nameofyourvariable+Change
constructor() { }
ngOnInit() {}
changeMyVar(v: number) {
this.myVariable=v;
this.myVariableChange.emit(myVariable);
}
And use two way binding with parantheses. I mean like following:
<subject-component [(setSubjectService)]="selectedSubject"></subject-component>