Menu
I'm trying to center a modal. It contains other components, so the position depends on the content. I'm trying to get it this way, which doesn't work and not sure how to fix it:
component HTML:
<div #modal [style.top]="positionTop" [style.left]="positionLeft">
<app-modal-one *ngIf="feature==='one'"> </app-modal-one>
<app-modal-two *ngIf="feature==='two'"></app-modal-two>
<app-modal-three *ngIf="feature==='three'"></app-modal-three>
</div>
component ts:
@ViewChild('modal') private modalContent: ElementRef;
ngOnInit() {
this.modalHeight = this.modalContent.nativeElement.offsetHeight;
this.modalWidth = this.modalContent.nativeElement.offsetWidth;
this.positionLeft = (window.innerWidth - this.modalWidth) / 2 + "px";
this.positionTop = (window.innerHeight - this.modalHeight) / 2 + "px";
console.log("on init: "+this.modalWidth)
}
The console log shows the size as 0. If I check it later once it's displayed, it shows the right size. When and how can I get this size (of the #modal) before/or just after it's all displayed?
953
Use the @Input() decorator in a child component or directive to let Angular know that a property in that component can receive its value from its parent component. It helps to remember that the data flow is from the perspective of the child component.
To let Angular know that a property in a child component or directive can receive its value from its parent component we must use the @Input() decorator in the said child. The @Input() decorator allows data to be input into the child component from a parent component.
The @Output() 's type. Tells Angular to create a new event emitter and that the data it emits is of type string. For more information on EventEmitter , see the EventEmitter API documentation. The addNewItem() function uses the @Output() , newItemEvent , to raise an event with the value the user types into the <input> .
Both are used to transform the data from one component to another component. Or, you can say pass the different types of data from parent to child component and child to parent component. Or, in a simple way transform/exchange data between two-component.
constructor(private cdRef:ChangeDetectorRef){}
@ViewChild('modal') private modalContent: ElementRef;
ngAfterViewInit() {
this.modalHeight = this.modalContent.nativeElement.offsetHeight;
this.modalWidth = this.modalContent.nativeElement.offsetWidth;
this.positionLeft = (window.innerWidth - this.modalWidth) / 2 + "px";
this.positionTop = (window.innerHeight - this.modalHeight) / 2 + "px";
console.log("on init: "+this.modalWidth)
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
