What strategies can be implemented to avoid re-rendering in Angular 6 when the window is resized or loses focus?

I am currently working with a component in Angular 6.0.8 that consists of only an iframe element.

Here is the code in page.component.html:

<iframe [src]="url">

The logic for setting the URL is handled in page.component.ts:

ngOnInit() {
    this.url = this.route.snapshot.data['url'];
}

However, I have noticed that when I resize the window or click outside of the component causing it to lose focus, Angular will re-render the component triggering lifecycle hooks such as DoCheck, AfterContentChecked, and AfterViewChecked.

As a result, the browser will request the URL in the iframe again, which is not the behavior I anticipated.

How can I prevent this from happening?

javascriptangulartypescript

Answer №1

One effective way to minimize unnecessary rerenders is by utilizing the change detection strategy on push (ChangeDetectionStrategy.OnPush).

Check out a detailed guide on the Angular onpush change detection strategy here.

By default, Angular uses the ChangeDetectionStrategy.Default for change detection.

The default strategy triggers change detection on all components whenever there is any change in the application triggered by user events, timers, XHR, promises, etc.

This means that even simple actions like clicking a button or receiving data from an AJAX call can trigger change detection unnecessarily.

...

OnPush Change Detection Strategy

We have the option to set the ChangeDetectionStrategy of our component to ChangeDetectionStrategy.OnPush .

For example:

@Component({
  selector: 'tooltip',
  template: `
   <h1>{{config.position}}</h1>
    {{runChangeDetection}}
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending data from MongoDB API to HTML in Electron using parameters

I am currently developing an Electron application for my personal use and utilizing MongoDB Atlas as the backend for my Node application. As I am relatively new to Electron, I am still experimenting with different approaches, so there might be some minor m ...

javascriptnode.jsmongodbelectron

Unraveling the Mysteries of AngularJS in a Tutorial Snippet

After reading through the enlightening theory snippets in Step 3 of AngularJS Tutorial, one particular passage piqued my curiosity: The scope, which connects our controller and template to create a dynamic view, is not isolated within its own bounda ...

javascriptangularjsinheritancescope

The onClick event handler is executed during every rendering process

Initially, my default state is set as follows: this.state = { selectedTab : 'tab1' } When it comes to rendering, this is how I define it: render(){ const { selectedTab } = this.state; return( <li>tab1</li><li>ta ...

javascriptreactjs

Issue with JQuery image upload functionality not functioning correctly for upcoming events

In order to enable users to upload images with their posts, I have implemented an upload form alongside every reply form. Users can upload an image by clicking the upload button and then submitting the post. Currently, the upload form works for the first ...

javascriptjqueryajax

Encountering a surprise token < while processing JSON with ASP.NET MVC alongside Angular

I encountered an issue when attempting to return the Index page. The data is successfully sent from the client to the server, but upon trying to display the Index page, an error occurs. Could someone review my code and identify where the mistake lies? acc ...

c#jsonasp.net-mvcangulartypescript

Preventing angular mat-menu from closing when clicking outside of it: simple solutions

When implementing MatMenu as a popup for guiding new users on my web app, I prefer not to close it when the user clicks outside of it. I've successfully used $event.stopPropagation() to prevent closure when clicking a button within it. Now, I'm ...

angularangular-materialangular7

Updating the text input value in a database with PHP upon button click

Here is a breakdown of what has been implemented so far: The database table is named adhar_card. Below is the structure image for reference (Adhard_card_id serves as the primary key). https://i.sstatic.net/8j4m6.jpg Clicking on the verify button will cha ...

javascriptphpjqueryhtmlajax

Experimenting with key directive in the newest version of Angular (9)

I'm currently testing a directive, but I am facing an issue where the length of the value in the directive is always undefined. What could be causing this problem? @Directive({ selector: '[evAutoTab]' }) export class EvAutoTabDirective { ...

angularunit-testingangularjs-directivejasminekeyup

Issue: Encounter of "Uncaught (in promise) TypeError" while implementing RiveScript chatbot in Angular

I've been working on integrating a chatbot based on RiveScript into Angular. The chatbot is functioning well - I always see the correct response in the console. Displaying the user's input is also working seamlessly. However, I'm encounterin ...

javascriptangulartypescriptchatbotrivescript

How can I code a script to import JSON data into MongoDB database?

I have a JSON file named "data.json" that contains an array of people's names as shown below: "data": [ { { "name":"John", "age":30, } { "name":"Mark", "age":45, } } ] I am ...

javascripthtmljsonmongodb

I'm unable to modify the text within my child component - what's the reason behind this limitation?

I created a Single File Component to display something, here is the code <template> <el-link type="primary" @click="test()" >{{this.contentShow}}</el-link> </template> <script lang="ts"> imp ...

javascripthtmltypescriptvue.js

Display a div beside it when hovering over a specific part of the image

If I have an image that is 200px wide and 900px tall How can I make a div display alongside it when hovering over a specific section of the image? ...

javascriptjquerycss

jQuery ceases to function once AJAX content is loaded

Exploring Options for Flexible Data Display I'm currently in the process of building a webpage that allows users to choose between different layouts for loading data. This includes the option to display data in either a list format or a card interfac ...

javascriptphpjqueryajaxreload

Angular fails to show route after successful login

Within my application, I have divided it into two areas: the admin area (referred to as iwti) and the 'retaguarda' area. The 'retaguarda' section is functioning correctly, but when I navigate to the route /iwti, the layout within the &l ...

angulartypescriptroutesangular-ui-routerrouter

Linking all styles with Angular 2

Is it possible to apply a style when the exact nature of that style is unknown? Consider a scenario where I have a model containing string variables defining styles, as shown below: myStyle1:string="margin-left:10px"; myStyle2:string="margin ...

cssangularbindingstyles

Auto-scroll feature malfunctioning

My auto scroll function using jQuery isn't working, here is my CSS: #convo_mes{ text-align:left; width:98%; height:80%; background:#fff; border:1px solid #000; overflow-x:auto; } And in my JavaScript: $(".mes").click(functio ...

javascriptjquerycss

Update the dropdown menu based on the revised time

I need to create a PHP site and JavaScript function that changes a dropdown menu based on specific time intervals, such as 7:00-8:00 (id530), 13:00-15:00 (id1330), or 20:00-03:00 (id2130). For example, if the time is 7:31, the dropdown menu should display/ ...

javascriptphpdrop-down-menu

Combining Date and Time in Javascript: A Guide

As a JavaScript beginner, I am struggling with combining date and time pickers. Despite finding similar questions, I have not yet found the solution I need. I have two inputs: one for the datePicker and another for the timePicker. <form> <div clas ...

javascripthtmljqueryangularjs

"Creating a duplicate of an element by utilizing the `next`

I have a dilemma involving two divs within a section of my project - one div is dynamically created while the other exists statically. My goal is to transfer the non-dynamically created div into the one that is generated dynamically. let adContainer = $ ...

javascripthtmljquery

Does this information operate on Vue or Node?

I have recently started learning programming and currently working on an HTML project for school. My professor mentioned that we should only use Node.js for this project. However, I am concerned that the function I used below might be Vue instead of Node ...

javascriptnode.jsvue.js