All functions from HTML are called but classes don't get attached. All classes are defined in the .css file. This component is hosted within other one. Can anyone see what is wrong and why classes are not applied?
If I use jQuery to .addClass() or .removeClass() classes are added/removed. But I would like to use Angular facility and not to use direct DOM manipulation.
This is my component
import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
@Component({
selector: 'app-popup',
templateUrl: './popup.component.html',
styleUrls: ['./popup.component.css']
})
export class PopupComponent implements OnInit {
@Input() functionName: string;
@Input() fileName: string;
@Input() columnName: string;
ngOnInit() {
this.startPopup();
}
startPopup() {
this.setMyModalClasses(this.functionName);
this.setFunctionInputClasses(this.functionName);
this.setResultBodyClass(this.functionName);
}
setFunctionInputClasses(in: string) {
return { 'visually-hidden': true };
}
setResultBodyClass(in: string) {
return { 'text-active' : false, 'image-active' : true };
}
setMyModalClasses(in: string) {
return { 'my-modal-initial': true, 'max-height-90': true };
}
}
and this is my HTML
<div class="my-modal" [ngClass]="setMyModalClasses()">
<div class="my-modal-content">
<div class="initial-display">
<div id="functon-input" class="functon-input"
[ngClass]="setFunctionInputClasses()">
should not be on display
</div>
</div>
<div class="result-display">
<div id="result-body" class="result-body"
[ngClass]="setResultBodyClass()">
ABC ABC ABC
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
Your functions returning styles, not classnames, so maybe instead of [ngClass] you should try [ngStyle].
答案 1 :(得分:0)
The function setMyModalClasses() is not passing in a parameter but in TS file it is expecting one. Same for all functions. I think startPopup() is unnecessary