Styjun

How smart contract transactions work?

Properly unlinking hard links

awk print conditions

Calculate Landau's function

Squares inside a square

Quick Tilepaint Puzzles: Corridors and Corners

meaning of "educating the ice"?

How to differentiate between two people with the same name in a story?

In Toy Story, are toys the only inanimate objects that become alive? And if so, why?

LINQ Extension methods MinBy and MaxBy

'spazieren' - walking in a silly and affected manner?

How does Query decide the order in which the functions are applied?

Can I leave a large suitcase at TPE during a 4-hour layover, and pick it up 4.5 days later when I come back to TPE on my way to Taipei downtown?

I was given someone else's visa, stamped in my passport

How does the search space affect the speed of an ILP solver?

Am I required to correct my opponent's assumptions about my morph creatures?

How can I portray a character with no fear of death, without them sounding utterly bored?

How to save money by shopping at a variety of grocery stores?

Why don't "echo -e" commands seem to produce the right output?

Existing light fixture is connected to 2 white wires, black wires are capped

Can a human variant take proficiency in initiative?

Is Chuck the Evil Sandwich Making Guy's head actually a sandwich?

What is the motivation behind designing a control stick that does not move?

Is it good practice to speed up and slow down where not written in a song?

Set two elements to the same height

Angular 2 @ViewChild returns undefinedAngular 2 - ngIf of observable makes element unaccesibleAngular - reuse component for display & modify causes @input problems?Accessing nativeElement of a component by @ViewChildAngular 4 set source for image or video on clickempty button because of a checkboxExpression has changed error on Opening a Modal Popup inside a componentAngular: How to change child element heightBinding to Handsontable height property causes ExpressionChangedAfterItHasBeenCheckedError in testsExpression has changed after it was checked in Angular using Reactive Forms

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I have one element that I am trying to set to the same height of another, and where the latter element is displayed conditionally using the *ngIf directive:

<!-- HTML code -->
<my-custom-component #notificationBar *ngIf="notificationMessage">
</my-custom-component>

<ion-content>
 <div style="background: red; width: 100%;"
 [style.height]="notificationBar && notificationBar.nativeElement.offsetHeight">
 </div>
 <!-- .... -->
</ion-content>


//*.ts code
@ViewChild("notificationBar") notificationBar: ElementRef;

The problem that I am facing is that I am having the ExpressionChangedAfterItHasBeenCheckedError error when my custom component is displayed:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'height: undefined'. Current value: 'height: 0'.

Is there any other proper way to set the two elements to the same height?

Thanks

angular ionic-framework ionic4

share|improve this question

asked Mar 28 at 0:08

StriderStrider

98333 gold badges1212 silver badges3434 bronze badges

add a comment | 

1

I have one element that I am trying to set to the same height of another, and where the latter element is displayed conditionally using the *ngIf directive:

<!-- HTML code -->
<my-custom-component #notificationBar *ngIf="notificationMessage">
</my-custom-component>

<ion-content>
 <div style="background: red; width: 100%;"
 [style.height]="notificationBar && notificationBar.nativeElement.offsetHeight">
 </div>
 <!-- .... -->
</ion-content>


//*.ts code
@ViewChild("notificationBar") notificationBar: ElementRef;

The problem that I am facing is that I am having the ExpressionChangedAfterItHasBeenCheckedError error when my custom component is displayed:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'height: undefined'. Current value: 'height: 0'.

Is there any other proper way to set the two elements to the same height?

Thanks

angular ionic-framework ionic4

share|improve this question

asked Mar 28 at 0:08

StriderStrider

98333 gold badges1212 silver badges3434 bronze badges

add a comment | 

I have one element that I am trying to set to the same height of another, and where the latter element is displayed conditionally using the *ngIf directive:

<!-- HTML code -->
<my-custom-component #notificationBar *ngIf="notificationMessage">
</my-custom-component>

<ion-content>
 <div style="background: red; width: 100%;"
 [style.height]="notificationBar && notificationBar.nativeElement.offsetHeight">
 </div>
 <!-- .... -->
</ion-content>


//*.ts code
@ViewChild("notificationBar") notificationBar: ElementRef;

The problem that I am facing is that I am having the ExpressionChangedAfterItHasBeenCheckedError error when my custom component is displayed:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'height: undefined'. Current value: 'height: 0'.

Is there any other proper way to set the two elements to the same height?

Thanks

angular ionic-framework ionic4

share|improve this question

asked Mar 28 at 0:08

StriderStrider

98333 gold badges1212 silver badges3434 bronze badges

<!-- HTML code -->
<my-custom-component #notificationBar *ngIf="notificationMessage">
</my-custom-component>

<ion-content>
 <div style="background: red; width: 100%;"
 [style.height]="notificationBar && notificationBar.nativeElement.offsetHeight">
 </div>
 <!-- .... -->
</ion-content>


//*.ts code
@ViewChild("notificationBar") notificationBar: ElementRef;

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'height: undefined'. Current value: 'height: 0'.

angular ionic-framework ionic4

angular ionic-framework ionic4

share|improve this question

asked Mar 28 at 0:08

StriderStrider

98333 gold badges1212 silver badges3434 bronze badges

share|improve this question

asked Mar 28 at 0:08

StriderStrider

98333 gold badges1212 silver badges3434 bronze badges

asked Mar 28 at 0:08

StriderStrider

98333 gold badges1212 silver badges3434 bronze badges

asked Mar 28 at 0:08

StriderStrider

98333 gold badges1212 silver badges3434 bronze badges

1 Answer
1

active

oldest

votes

2

The height of the notification bar can be obtained with the help of a property getter. When that height changes, call ChangeDetectorRef.detectChanges to avoid the exception that would occur when the height is applied to the div element.

@ViewChild("notificationBar") private notificationBarRef: ElementRef<HTMLElement>;

private _notificationBarHeight: number = null;

public get notificationBarHeight(): number 
 const height = this.notificationBarRef ? this.notificationBarRef.nativeElement.offsetHeight : null;
 if (Math.abs(height - this._notificationBarHeight) > 0.1) 
 this._notificationBarHeight = height;
 this.changeDetectorRef.detectChanges();
 
 return this._notificationBarHeight;

In the template, set the height of the div element in pixels with the [style.height.px] binding:

<div ... [style.height.px]="notificationBarHeight">
</div>

See this stackblitz for a demo.

share|improve this answer

edited Mar 28 at 15:48

answered Mar 28 at 1:21

ConnorsFanConnorsFan

37.5k77 gold badges4141 silver badges6868 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55388312%2fset-two-elements-to-the-same-height%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

The height of the notification bar can be obtained with the help of a property getter. When that height changes, call ChangeDetectorRef.detectChanges to avoid the exception that would occur when the height is applied to the div element.

@ViewChild("notificationBar") private notificationBarRef: ElementRef<HTMLElement>;

private _notificationBarHeight: number = null;

public get notificationBarHeight(): number 
 const height = this.notificationBarRef ? this.notificationBarRef.nativeElement.offsetHeight : null;
 if (Math.abs(height - this._notificationBarHeight) > 0.1) 
 this._notificationBarHeight = height;
 this.changeDetectorRef.detectChanges();
 
 return this._notificationBarHeight;

In the template, set the height of the div element in pixels with the [style.height.px] binding:

<div ... [style.height.px]="notificationBarHeight">
</div>

See this stackblitz for a demo.

share|improve this answer

edited Mar 28 at 15:48

answered Mar 28 at 1:21

ConnorsFanConnorsFan

37.5k77 gold badges4141 silver badges6868 bronze badges

add a comment | 

2

The height of the notification bar can be obtained with the help of a property getter. When that height changes, call ChangeDetectorRef.detectChanges to avoid the exception that would occur when the height is applied to the div element.

@ViewChild("notificationBar") private notificationBarRef: ElementRef<HTMLElement>;

private _notificationBarHeight: number = null;

public get notificationBarHeight(): number 
 const height = this.notificationBarRef ? this.notificationBarRef.nativeElement.offsetHeight : null;
 if (Math.abs(height - this._notificationBarHeight) > 0.1) 
 this._notificationBarHeight = height;
 this.changeDetectorRef.detectChanges();
 
 return this._notificationBarHeight;

In the template, set the height of the div element in pixels with the [style.height.px] binding:

<div ... [style.height.px]="notificationBarHeight">
</div>

See this stackblitz for a demo.

share|improve this answer

edited Mar 28 at 15:48

answered Mar 28 at 1:21

ConnorsFanConnorsFan

37.5k77 gold badges4141 silver badges6868 bronze badges

add a comment | 

The height of the notification bar can be obtained with the help of a property getter. When that height changes, call ChangeDetectorRef.detectChanges to avoid the exception that would occur when the height is applied to the div element.

@ViewChild("notificationBar") private notificationBarRef: ElementRef<HTMLElement>;

private _notificationBarHeight: number = null;

public get notificationBarHeight(): number 
 const height = this.notificationBarRef ? this.notificationBarRef.nativeElement.offsetHeight : null;
 if (Math.abs(height - this._notificationBarHeight) > 0.1) 
 this._notificationBarHeight = height;
 this.changeDetectorRef.detectChanges();
 
 return this._notificationBarHeight;

In the template, set the height of the div element in pixels with the [style.height.px] binding:

<div ... [style.height.px]="notificationBarHeight">
</div>

See this stackblitz for a demo.

share|improve this answer

edited Mar 28 at 15:48

answered Mar 28 at 1:21

ConnorsFanConnorsFan

37.5k77 gold badges4141 silver badges6868 bronze badges

@ViewChild("notificationBar") private notificationBarRef: ElementRef<HTMLElement>;

private _notificationBarHeight: number = null;

public get notificationBarHeight(): number 
 const height = this.notificationBarRef ? this.notificationBarRef.nativeElement.offsetHeight : null;
 if (Math.abs(height - this._notificationBarHeight) > 0.1) 
 this._notificationBarHeight = height;
 this.changeDetectorRef.detectChanges();
 
 return this._notificationBarHeight;

<div ... [style.height.px]="notificationBarHeight">
</div>

share|improve this answer

edited Mar 28 at 15:48

answered Mar 28 at 1:21

ConnorsFanConnorsFan

37.5k77 gold badges4141 silver badges6868 bronze badges

answered Mar 28 at 1:21

ConnorsFanConnorsFan

37.5k77 gold badges4141 silver badges6868 bronze badges

answered Mar 28 at 1:21

ConnorsFanConnorsFan

37.5k77 gold badges4141 silver badges6868 bronze badges