@Component({
selector: 'mh-feature-popup',
template: `
<div class="full">
<div>
<div class="container-fluid" [@featurepop]="state">
<div class="row">
<div class="col-xs-12 col-md-4 col-md-offset-4 popup">
<div class="row">
<div id="shadow-card">
<div class="col-xs-12 dialog-header hidden-md hidden-lg">
<div class="col-xs-1 skeleton hidden-md hidden-lg clickCursor" (click)="toggleState()">
<div class="close"></div>
</div>
<div class="text_heading col-xs-10">
<span *ngIf="name">{{name}}</span>
</div>
</div>
<div class="row dialog-content">
<div class="dialog-title skeleton col-md-10 col-md-push-1 hidden-xs hidden-sm">
<span *ngIf="name">{{name}}</span>
</div>
<div class="col-md-2 skeleton hidden-xs hidden-sm clickCursor" (click)="toggleState()">
<div class="close"></div>
</div>
</div>
<div *ngIf="data" #data_value>{{data}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`,
styles:[`
.full{
background-color: rgba(0,0,0,0.2);
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
`],
providers:[ ApiService ],
animations: [
trigger('featurepop', [
state('inactive', style({
transform: 'scale(0)'
})),
state('active', style({
transform: 'scale(1)'
})),
transition('inactive => active', [
animate(250)
]),
transition('active => inactive', [
animate(250)
])
])
]
})
export class FeaturePopUpComponent {
state = 'inactive';
@Input()
data;
@Input()
name;
show(a,b,c){
this._api.get(a,b,c).subscribe(
data => {
this.data = {'data': a};
this.name = {'name': b};
console.log(this.data);
},
err => console.log(err),
() => {
this._zone.run(() => {
this.rend.setElementStyle(this.element.nativeElement,"display","block");
this.toggle();
console.log(this.state);
});
}
);
}
}
The feature of this component is to display a pop-up when the show() function is invoked with content obtained from an API call.
Although the show() function is functional, there seems to be an issue as the received data doesn't populate in the component's empty pop-up https://i.stack.imgur.com/Cuwtk.jpg.
Interestingly, changing the browser screen size causes the data to appear on the pop-up https://i.stack.imgur.com/aztYP.jpg.
However, the onChange() method triggers only when altering the screen size, not upon data changes. Various attempts including using JSON objects for data, employing changeDetection.Ref and NgZone, as well as implementing ngDoCheck() have been unsuccessful in resolving this issue.
This implementation utilizes the angular-universal starter kit. Assistance in addressing this issue via a jsfiddle or similar approach would be greatly appreciated.