When I switch to a Tab Page for the first time, I'd like to do some initialization using the contentHeight of the ion-content, but I can't find the correct place to do it. Here's what I did:
import { Component, ViewChild, ElementRef } from '#angular/core';
import { NavController, Content } from 'ionic-angular';
#Component({
selector: 'page-test',
templateUrl: 'test.html'
})
export class TestPage {
#ViewChild(Content) content : Content;
constructor(private nav: NavController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad');
console.log('\tcontentHeight', this.content.contentHeight);
console.log('\tscrollHeight', this.content.scrollHeight);
let element = this.content.getScrollElement();
console.log('\tclientHeight', element.clientHeight);
}
doClick() {
console.log('doClick');
console.log('\tcontentHeight', this.content.contentHeight);
console.log('\tscrollHeight', this.content.scrollHeight);
let element = this.content.getScrollElement();
console.log('\tclientHeight', element.clientHeight);
}
}
When running and clicking the button, the result is:
ionViewDidLoad
contentHeight – 0
scrollHeight – 0
clientHeight – 568
doClick
contentHeight – 475
scrollHeight – 569
clientHeight – 475
The values shown after clicking the button are the ones I need, but I need them earlier during initialization. ionViewDidLoad seems to be called before everything is fully initialized.
How can I initialize properly?
Related
html file:
<div #sampleComponent class="cdt-sample-component"
[ngStyle]="{'height': (view_height) + 'px'}" >
<app-component></app-component>
</div>
css file:
.cdt-sample-component {
display: flex;
flex: 1;
height: calc(100% / 3);
}
}
ts file:
constructor(private renderer: Renderer2) {
}
ngAfterViewInit() {
logger.info("NativeElement height " + this.renderer.selectRootElement(this.metricsComponent['nativeElement']).getAttribute('height'));
}
The above log print in ts file is returning null for "height" attribute.
I am using angular 7.
I would like to get the value of "height" attribute defined in css in div element "cdt-sample-component", somehow i am getting null. Can you please answer on how to get the height attribute value in ts file which is defined in css file.
You could try to use ViewChild to get a reference to the element and read it's clientHeight or offsetHeight property.
Controller
import { AfterViewInit, Component, ElementRef, ViewChild } from "#angular/core";
export class SomeComponent implements AfterViewInit {
#ViewChild("sampleComponent") sampleComponent: ElementRef<any>;
ngAfterViewInit() {
console.log(this.sampleComponent.nativeElement.clientHeight);
}
}
For clientHeight vs offsetHeight see here: https://stackoverflow.com/a/15615701/6513921
i have an angular 6 application, and a different web application inside in an iframe.
when i receive message from the iframe with the postmessage function, i do get to
the onMessage function, and then i do get to the openOffNet - but then the popup doesnt work.
it doesnt work when i activate the popup from a button.
anyone have any idea why it does not work?
thank you
import {HostListener, Component, OnInit } from '#angular/core';
import {NgbModal, NgbActiveModal} from '#ng-bootstrap/ng-bootstrap';
import {NgbdModalContentComponent} from '../ngbd-modal-content/ngbd-modal-content.component';
import {ModalAddDeviceComponent} from '../popupBoxes/modal-add-device/modal-add-device.component';
import {ModalAddOffnetComponent} from '../popupBoxes/modal-add-offnet/modal-add-offnet.component';
#Component({
selector: 'app-top-bar',
templateUrl: './top-bar.component.html',
styleUrls: ['./top-bar.component.css']
})
export class TopBarComponent implements OnInit {
constructor(private modalService: NgbModal) {
(<any>window).onMessage= this.onMessage.bind(this);
}
ngOnInit() {
}
#HostListener('window:message', ['$event'])
onMessage(e) {
console.log('HostListener');
if(e.data.function == 'subnetworkClicked'){
}
else{
console.log("open popUp");
this.openOffNet();
}
}
openOffNet () : void {
const modalRef = this.modalService.open(ModalAddOffnetComponent);
}
}
Try 'document:message' instead of 'window:message'
I read that in Angular it is a very bad practice to use the CSS hidden element to hide an element like this:
.container{
background-color : powderblue;
height : 50px;
width : 100%
}
#media (max-width: 400px){
.container{
display: none;
}
}
<div class="container"></div>
And I know the Angular way to show or hide an element is using the *ngIf directive.
Question
How can I get the * ngIf to react on the media query in an 'Angular fashion'?
You can use angular/breakpoints-angular-cdk
follow these steps
on the terminal
npm install #angular/cdk
Then import the layout module and and add it to your NgModule’s list of imports
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { LayoutModule } from '#angular/cdk/layout';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
LayoutModule
],
providers: [],
bootstrap: [AppComponent]
})
right after you can use it in your component, just import these classes from #angular/cdk/layout
import { Component, OnInit } from '#angular/core';
import { BreakpointObserver, BreakpointState } from '#angular/cdk/layout';
#Component({ ... })
export class AppComponent implements OnInit {
public showContainer: boolean;
constructor(public breakpointObserver: BreakpointObserver) {}
ngOnInit() {
this.breakpointObserver
.observe(['(min-width: 400px)'])
.subscribe((state: BreakpointState) => {
if (state.matches) {
this.showContainer = true;
} else {
this.showContainer = false;
}
});
}
}
Check the docs it is a simple API
Angular flex layout is better solution for this. You wouldn't need media queries and it has special responsive feature to show and hide for example
fxShow: This markup specifies if its host element should be displayed (or not)
<div fxShow [fxShow.xs]="isVisibleOnMobile()"></div>
fxHide: This markup specifies if its host element should NOT be displayed
<div fxHide [fxHide.gt-sm]="isVisibleOnDesktop()"></div>
No need to write lot of css and it's very compatible with angular material.
https://github.com/angular/flex-layout
I came up with the following base class and have found it works well.
import { HostBinding, OnDestroy, OnInit } from '#angular/core';
import { MediaObserver } from '#angular/flex-layout';
import { Subscription } from 'rxjs';
export class MediaQueryClassBaseComponent implements OnInit, OnDestroy {
#HostBinding('class.xl') private xl: boolean;
#HostBinding('class.lg') private lg: boolean;
#HostBinding('class.md') private md: boolean;
#HostBinding('class.sm') private sm: boolean;
#HostBinding('class.xs') private xs: boolean;
private mediaObserverSubscription: Subscription | undefined = undefined;
constructor(protected readonly mediaObserver: MediaObserver) {}
ngOnInit(): void {
if (this.mediaObserverSubscription)
return;
this.mediaObserverSubscription = this.mediaObserver.media$.subscribe(x => {
this.xl = x.mqAlias == 'xl';
this.lg = x.mqAlias == 'lg';
this.md = x.mqAlias == 'md';
this.sm = x.mqAlias == 'sm';
this.xs = x.mqAlias == 'xs';
});
}
ngOnDestroy(): void {
if (!this.mediaObserverSubscription)
return;
this.mediaObserverSubscription.unsubscribe();
this.mediaObserverSubscription = undefined;
}
}
If you inherit (extend) your component from this class, the host element of your component will have a class added to it with the media query alias.
For example...
<app-search-bar class="some-class" _nghost-c5 ...>
...will become...
<app-search-bar class="some-class lg" _nghost-c5 ...>
Note the added media query alias 'lg' which will change according to the window size. This makes it easy to add responsive styles to each media size by
wrapping the size-specific styles in your component's SCSS files.
Like this...
:host-context(.sm, .md) { // styles specific to both sm and md media sizes
.header {
padding: 6px;
width: 420px;
}
}
:host-context(.lg, .xl) { // styles specific to both lg and xl media sizes
.header {
padding: 10px;
width: 640px;
}
}
I've put the full file on my gist https://gist.github.com/NickStrupat/b80bda11daeea06a1a67d2d9c41d4993
Check here, it's forked solution found somewhere on internet with my customization, but it works for me (not only hiding element with display:none, but removing if from DOM - like *ngIf works)
import {
Input,
Directive,
TemplateRef,
ViewContainerRef,
OnDestroy,
ChangeDetectorRef
} from '#angular/core';
/**
* How to use this directive?
*
* ```
*
* Div element will exist only when media query matches, and created/destroyed when the viewport size changes.
*
* ```
*/
#Directive({
selector: '[mqIf]'
})
export class MqIfDirective implements OnDestroy {
private prevCondition: boolean = null;
i = 0;
private mql: MediaQueryList;
private mqlListener: (mql: MediaQueryList) => void; // reference kept for cleaning up in ngOnDestroy()
constructor(private viewContainer: ViewContainerRef,
private templateRef: TemplateRef,
private ref: ChangeDetectorRef) {
}
/**
* Called whenever the media query input value changes.
*/
#Input()
set mqIf(newMediaQuery: string) {
if (!this.mql) {
this.mql = window.matchMedia(newMediaQuery);
/* Register for future events */
this.mqlListener = (mq) => {
this.onMediaMatchChange(mq.matches);
};
this.mql.addListener(this.mqlListener);
}
this.onMediaMatchChange(this.mql.matches);
}
ngOnDestroy() {
this.mql.removeListener(this.mqlListener);
this.mql = this.mqlListener = null;
}
private onMediaMatchChange(matches: boolean) {
if (matches && !this.prevCondition) {
this.prevCondition = true;
this.viewContainer.createEmbeddedView(this.templateRef);
} else if (!matches && this.prevCondition) {
this.prevCondition = false;
this.viewContainer.clear();
}
/**
* Infinitive loop when we fire detectChanges during initialization
* (first run on that func)
*/
if (this.i > 0) {
this.ref.detectChanges();
}
else
this.i++;
}
}
See here
.container{
background-color : powderblue;
height : 50px;
width : 100%
}
#media (max-width: 400px){
.container{
display: flex;
}
}
<div class="container"></div>
I am using the following code for creating the dynamic components
import {
Component, OnInit, ViewContainerRef, ViewChild, ViewChildren,
ReflectiveInjector, ComponentFactoryResolver, ViewEncapsulation, QueryList, Input, AfterViewInit
} from '#angular/core';
import { Router, ActivatedRoute } from '#angular/router';
import { forEach } from '#angular/router/src/utils/collection';
import { IComponent } from 'app/app.icomponent';
#Component({
encapsulation: ViewEncapsulation.None,
selector: 'dynamic-component',
entryComponents: [HomeComponent, HighlevelSignalComponent],
template: `
<div #dynamicDiv [ngClass]="classFromMenu" >
<ng-template #dynamicComponentContainer></ng-template>
</div>
`,
styleUrls: [
'./dynamic-content.component.css'
],
})
export class DynamicComponent implements IComponent, OnInit, AfterViewInit {
classFromMenu: any;
#ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer: ViewContainerRef;
constructor(private resolver: ComponentFactoryResolver, private route: Router,
private activatedRoute: ActivatedRoute, ) {
}
.......
buildComponent(passedData) {
// orderAndObjs has the data for creating the component
this.orderAndObjs.forEach(obj => {
var componentFactory = this.resolver.resolveComponentFactory(obj.component);
var compRef = this.dynamicComponentContainer.createComponent(componentFactory);
// compRef is the component that is created.
//Assuming the component that i am trying to create is <dynamic-component>.
//I want to add either a class or any other attribute like this
//<dynamic-component class="flex">
});
}
}
}
The dynamic-component is created perfectly fine and everything is working as expected. But the only issue is I want to add a class for dynamic-component so that it can be
<dynamic-component class="dynamicClass">
Any help is appreciated :(
Hmm.. I usually add it to the selector of component that is supposed to be an entryComponent ...
selector: 'dynamic-component.someclass',
^^^^^^^^^^^
to add attribute use attribute selector:
selector: 'dynamic-component[myattr=value]',
I call it hidden feature of entryComponents
but its declarative approach and can't be changed at runtime(indeed we can change it)
In Angular 5/6, using Renderer2 from #angular/core, you can do something like below:
constructor(private resolver: ComponentFactoryResolver, private route: Router,
private activatedRoute: ActivatedRoute, private renderer2: Renderer2) {
}
buildComponent(passedData) {
this.orderAndObjs.forEach(obj => {
var componentFactory = this.resolver.resolveComponentFactory(obj.component);
var compRef = this.dynamicComponentContainer.createComponent(componentFactory);
this.renderer2.addClass(compRef.location.nativeElement, 'flex');
});
}
High-level DOM operations are performed with Renderer2 provider. Considering that it was injected, it is:
this.renderer2.addClass(compRef.location.nativeElement, 'dynamicClass');
It should be noticed that depending on how dynamic element is attached to DOM, this may be unnecessary complication.
Considering that dynamicComponentContainer is real DOM element and not <ng-template>, the view of dynamic component can be directly mounted to the container, thus eliminating <dynamic-component> wrapper element:
Given the container:
<div class="dynamicClass" #dynamicComponentContainer></div>
It will be:
var compRef = componentFactory.create(
this.injector,
[],
this.dynamicComponentContainer.element.nativeElement
);
I have created a plunker here:
http://plnkr.co/edit/8bwqkYQ6tqrpGwHT588y?p=preview
that shows the issue.
Basically, I have 2 components. The first component has a 2-way binding of a property to the child component.
My parent component is:
import { Component, Input, Output, EventEmitter } from '#angular/core'
import { ChildComponent } from "./childComponent"
#Component({
selector: 'parentComponent',
template: `
<div>
Reset<br>
<div>Parent SelectedId: {{selectedId}}</div>
<childComponent [(selectedId)]="selectedId"></childComponent>
</div>
`,
directives: [ChildComponent]
})
export class ParentComponent {
#Input() selectedId: number;
ngOnChanges(changes) {
console.log("Parent changes called!");
}
}
and my child component:
import { Component, Input, Output, EventEmitter } from '#angular/core'
#Component({
selector: 'childComponent',
template: `
<div>
<div>Child SelectedId: {{selectedId}}</div>
</div>
`,
directives: []
})
export class ChildComponent {
#Input() selectedId: number;
#Output() selectedIdChange: EventEmitter<number> = new EventEmitter<number>();
constructor() {
setTimeout(() => {
this.selectedId = 100;
this.selectedIdChange.emit(this.selectedId);
}, 2000);
}
ngOnChanges(changes) {
console.log("Child changes called!");
}
}
In the child, I set a timeout to change the value of selectedId programmatically after 2 seconds, then emit the value back to the parent.
This all works great, except for one thing... the ngOnChange of the parent is only being called once.
I would think that the parent would very much like to know if the child has changed the value, or else what is the point of 2 way binding??
What am I missing here?
The ngOnChange of the parent will only be called if App's selectedId changes, since that's what ParentComponent's input property is bound to.
If you want the parent to be notified of changes made in the child, bind to the xChange event (where x is the name of the input property) – i.e., break up the property and event bindings:
<childComponent [selectedId]="selectedId" (selectedIdChange)="changed($event)"></childComponent>
changed(newValue) {
console.log('newValue', newValue);
this.selectedId = newValue;
}
Plunker