*ngIf hide some content on mobile screen, Angular 4

angular detect screen size
angular 4 detect mobile or desktop
angular on screen resize
angular flex layout hide on mobile
angular small screen
ngclass
angular 4 media query
angular material hide element

I have:

showHide: false;

<div *ngIf="showHide">
  Content
</div>

<button (click)="showHide = !showMap">
  Button visited only max-width: 768px
</button>

In MAX-width: 768px, I have a button. On MIN-width: 768px button is hide. When I click on the button - it show a DIV. It work fine.

BUT

How to make *ngIf work only when MAX-width: 768px?

max-height: 768px

  • button is display: block
  • DIV is display: none (but when I click on the button = display: block)

min-height: 768px:

  • button is display: none
  • DIV is display: block

At the moment when I resize from example 500px to 1000px: It depends on button I pressed


You can use window.screen.width. Example:

ngOnInit() {
  if (window.screen.width === 360) { // 768px portrait
    this.mobile = true;
  }
}

Html:

<button *ngIf="mobile" (click)="showHide = !showMap"></button>

*ngIf hide some content on mobile screen, Angular 4, I have: showHide: false; <div *ngIf="showHide"> Content </div> <button (click)="​showHide = !showMap"> Button visited only max-width: 768px </button> In  min-height: 768px: That's better done via CSS than with Angular, just use a media query to hide the element. No CSS. When 500px I dont click on the button - I dont have a DIV. But when I resize to 1000px - I dont have DIV, but I want DIV on min-height: 768px. *ngIf hide DIV until you click on the button.


For future me or others if you need a solution that monitors the screen size and are using Observables/rxjs then this solution works:

ngOnInit(): void {
  // Checks if screen size is less than 1024 pixels
  const checkScreenSize = () => document.body.offsetWidth < 1024;

  // Create observable from window resize event throttled so only fires every 500ms
  const screenSizeChanged$ = Observable.fromEvent(window, 'resize').throttleTime(500).map(checkScreenSize);

  // Start off with the initial value use the isScreenSmall$ | async in the
  // view to get both the original value and the new value after resize.
  this.isScreenSmall$ = screenSizeChanged$.pipe(startWith(checkScreenSize()))
}

Difference Between NgIf And Hidden Or Display:none In Angular , Difference Between NgIf And Hidden Or Display:none In Angular. ngif vs hidden Table of Contents. ngIf in But with Angular, we can build rich applications some of the components may use too many resources. And even  In my example here, I am using the *ngIf directive in Angular 4 to toggle or show and hide elements. The Angular 4 ngIf will add or remove an elements from the DOM, based on a condition such as true or false. Must Read: How to Implement AutoComplete feature in Angular 6 with Dynamic Data using Web API.


Thought I would add this to the question as I found in this particular situation @angular/flex-layout to be very helpful. https://github.com/angular/flex-layout.

In particular you might be interested in the fxHide feature: https://github.com/angular/flex-layout/wiki/fxHide-API but this package makes working with a responsive application much easier in my opinion.

You can show or hide content like so.

Doesnt show when 'small' or greater than 'medium' resolutions:

<div fxShow.sm="false" fxShow.gt-md="false" fxShow="true" ></div>

Only hides when at medium resolution

<div fxShow fxHide.md ></div>

The breakpoints can be custom but they have default ones already set.

How do I hide or show content depending on screen size?, Bootstrap also comes with classes like visible-xs, hidden-sm, etc. that enables us to sho… width of a column based on screen size using col-sm-8, col-md-6, col-​lg-4. There is no such class or attribute built-in to ionic but we can user angular's I would go with sth. like (add it to your app.scss or any other global scss file): Example 1: Using *ngIf to “hide” the NavBar. In this first example we will have only one page layout and we will verify if the user is logged in and use *ngIf to verify if the application should display the navigation bar or not. This is the most common example we find when searching for how to hide the navbar when displaying the login page.


Just came across this answer and I wanted something that worked responsively as well as on-resize. I set 992px as the breakpoint because I'm also using bootstrap lg breakpoints concurrently.

export class TestComponent implements OnInit {

  constructor() { }

  isMobile = false;
  getIsMobile(): boolean {
    const w = document.documentElement.clientWidth;
    const breakpoint = 992;
    console.log(w);
    if (w < breakpoint) {
      return true;
    } else {
      return false;
    }
  }

  ngOnInit() {
    this.isMobile = this.getIsMobile();
    window.onresize = () => {
      this.isMobile = this.getIsMobile();
    };
  }
}

Then in the HTML

<div *ngIf="isMobile === true>Some mobile element!</div>

How to Show Hide or Toggle Elements in Angular 4, Let us assume I have a <div> element, which has few other elements like The Angular 4 ngIf will add or remove an elements from the DOM, based on a  This page will walk through Angular 4 NgIf-Then-Else example. NgIf conditionally includes a template based on the value of expression. It adds or removes the HTML element in DOM layout. If the expression value is true then NgIf renders the then template in its place and if the expression value is false then NgIf renders the else template in its place.


The least lines solution:

In your TS file:

public isMobileLayout = false;
ngOnInit() {
  window.onresize = () => this.isMobileLayout = window.innerWidth <= 991;
}

In HTML template:

<div *ngIf="isMobileLayout">This is visible only on mobile</div>

Edit: Also, you can detect mobile using the following code:

public get isMobileAgent() {
    const agent = navigator.userAgent || navigator.vendor || (window as any).opera;
    // tslint:disable-next-line:max-line-length
    return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(agent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(agent.substr(0, 4)));
}

This might be helpful to initialize isMobileLayout value before any resize happens:

public isMobileLayout = isMobileAgent;

Or:

<div *ngIf="isMobileLayout || isMobileAgent">This is visible only on mobile</div>

Angular track is your app in mobile, tablet or desktop view?, A new app is designed to be available on mobile, tablet and desktop, like it should on some pages, if we do it on the css way with media-queries, display: none depending on the window size, we will have a lot of html generated that we will hide. To avoid this we can do it also with *ngIf, so it is only rendered when needed. Let’s look at the NgIf directive in this tutorial and uncover how to use it. We’ll also explore using NgIf with the “Else” statement and “Then”, to give you a full guide on how to use it. You will learn how to show and hide DOM content based on your data, which we can then let NgIf handle and render updates to the DOM for us!


Using [hidden] instead of [ngIf] (Angular), we have options in Angular to show hide HTML Element using *ngIf and [hidden] hiding the “Div” that contains the input element after some process completed to display: none. 4 claps. Sithum Meegahapola. Written by  Hiding or showing parts of a DOM based on some conditions is a common requirement. AngularJS has four different directives (ng-show / ng-hide, ng-if, ng-include, ng-switch), which are used to conditionally display or hide the HTML DOM elements.


*ngIf not working in Angular application for hide/show layout after , *ngIf not working in Angular application for hide/show layout after upgrade to NS3 #872 that the only way to show/hide some elements is using visibility option. and setting a boolean to true to show content, the content doesnt show. https://play.nativescript.org/?template=play-ng&id=xRtLDX&v=4. Description link. A shorthand form of the directive, *ngIf="condition", is generally used, provided as an attribute of the anchor element for the inserted template. Angular expands this into a more explicit version, in which the anchor element is contained in an <ng-template> element.


How to use *ngIf else in Angular, NgIf is very useful if you want to show or hide parts of your is literally hiding the selected part of the DOM, just like the CSS "display: none" property, We have to use ng-content, because a normal div would be picked up by  Now, in Angular 4, *Ngif is slightly changed into if and else condition with added advantages. Here, I will explain how to use the *Ngif Condition with then and else in Angular 4. In order to work with this new *Ngif, you have to update your latest Angular CLI by the following command. npm install -g @angular/cli