Programmatically switch between show and hide using Angular Material

Is there a way to programmatically toggle between displaying and hiding attributes by clicking a button? For example, I have a card that includes both a map and a list view. Normally, these are shown side by side. However, on mobile devices, the list view's flex increases to 100, causing the map to be hidden. I want to give users the option to switch between these two views. How can I achieve this?

Here is an example of my code:

<md-card flex-gt-xs="40" flex-xs="100">
 <list></list>
</md-card>

<md-button>Toggle Views</md-button>

<md-card flex="60" hide-xs show-gt-xs >
  <leaflet height="40vh" ></leaflet>
</md-card>

Update:

Summary

I am looking to create two columns that can be switched between on mobile devices and displayed side by side on larger screens.

javascriptangularjsangular-material

Answer №1

I’m not entirely certain about your inquiry, but this CodePen showcases the fundamentals of toggling programmatically.

The md-button includes an ng-click attribute that triggers the function toggle(), which switches the value of view. The value of view is then passed to the ng-if directive for each card.

Code Snippet

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" style="height:100%" layout="column">
  <md-card flex-gt-xs="40" flex-xs="100" ng-if="view">
    Card 1
   <list></list>
  </md-card>

  <md-button ng-click="toggle()">toggle Views</md-button>

  <md-card flex="60" hide-xs show-gt-xs ng-if="!view">
    Card2
    <leaflet height="40vh" ></leaflet>
  </md-card>
</div>

JavaScript Code

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngDialog'])

.controller('AppCtrl', function($scope) {
  $scope.view = true;
  $scope.toggle = function () {
    $scope.view = !$scope.view;
  }
});

If you need to preserve data in elements that are being toggled, consider using ng-show instead of ng-if, as ng-if recreates the element each time it becomes true.

Answer №2

I've cracked the code! The key lies within $mdMedia.

javascript:

 $scope.$watch(function () {
            return $mdMedia('sm');
        }, function (response) {
            $scope.screenIsSmall = $mdMedia('sm');
        });

View:

   <md-card flex="60" ng-hide="screenIsSmall&&!showMap" style="max-height: 40vh">
       <md-button ng-show="screenIsSmall" ng-click="showMap = !showMap">toggle</md-button>
       <leaflet height="40vh"></leaflet>
    </md-card>

Answer №3

app.component.html

<div fxLayout="column" fxLayout.gt-sm="row wrap">
       <div fxFlex="50" class="flex-p">
              <mat-slide-toggle
                [checked]="isSlideChecked"
                (change)="toggleChanges($event)"
                >Toggle Visibility</mat-slide-toggle
              >
       </div>
</div>

<mat-card *ngIf="isSlideChecked">Dynamic Card Content</mat-card>

app.component.ts

 isSlideChecked: boolean = false;

  toggleChanges($event: MatSlideToggleChange) {
    this.isSlideChecked = $event.checked;
  }

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

The generation of React Native Jest coverage results may vary depending on how an ES6 module is exported

I am working with a React Native button component that consists of its own index.js and styles.js files. The content of styles.js is as follows: import { StyleSheet } from "react-native"; export default StyleSheet.create({ container: { borderRadius ...

javascriptreact-nativejestjs

Is the click count feature malfunctioning?

My goal is to track every mouse click made by the user, so I created a function for this purpose. However, it seems that the function is only counting the first click. To store the count values, I have created a variable. <!DOCTYPE html PUBLIC "-//W3 ...

javascripthtml

When checking if el.text() is equal to "string", it will return false, regardless of the actual content of the element being "string"

Looking at the code snippet below, it seems that the else block is always being executed instead of the if block. The alert confirms that the variable state has the value 'payment' as expected. var state = $('.check-state').text(); ale ...

javascriptjquery

Error encountered in AngularJS and JSON server: [$injector:unpr] An unidentified provider was found: $resourceProvider <- $resource <- menuFactory

Hello everyone, I recently created a small AngularJS application and utilized a JSON server for my backend operations. Unfortunately, I am encountering an issue with the provider in my code. Upon running it, I am receiving errors as shown below: Uncaugh ...

javascriptangularjsjson

Authorization error: The specified URL is not permitted by the application settings for Facebook login using the Javascript SDK

Encountered an error while trying to implement Facebook login using Javascript SDK in Chrome console: The given URL is not permitted by the application configuration: One or more of the URLs provided are not allowed by the app's settings. It must ...

angularjsfacebookfacebook-javascript-sdk

Is there a pub/sub framework specifically designed for managing events in Angular?

Having a background in WPF with Prism, I am familiar with the IEventAggregator interface. It allows you to define events that can be subscribed to from controllers and then triggered by another controller. This method enables communication between controll ...

javascriptc#angularjswpfpublish-subscribe

Skip creating declarations for certain files

src/ user.ts department.ts In the scenario outlined above, where there are two files in the src directory (user.ts and department.ts), is there a way to exclude the generation of declaration files specifically for department.ts when running tsc wi ...

javascripttypescript

Utilizing Jasmine with AngularJS: A Guide to Mocking the window.user.username

As a newcomer to using Jasmine, I am currently grappling with the task of mocking the window.user.username object while testing an AngularJS application. Let's say we have a variable called applicationUser that stores the value of window.user.usernam ...

angularjsjasmine

Extracting values from PHP using AJAX

Whenever a user clicks on the download button, a zip file is successfully created on the server with the necessary files. However, instead of getting an alert with the location of the zip variable ($zip) from PHP as expected, it shows [object Object]. The ...

javascriptphpjqueryajax

Get a reference to pass as an injection into a child component using Vue js

Is there a way to pass a reference to child components? For example: The Parent component provides the ref: <template> <div ref="myRef" /> </template> <script> export default { name: 'SearchContainer', pr ...

javascriptvue.jsvuejs2

Is there a way to deactivate the previous month button without affecting the dates in the AngularUI date-picker control?

Is it possible to automatically disable or hide the previous month button in the angularUI date-picker when displaying the current month, and then enable or show the previous month button when showing future months? For example, if the current month is J ...

angularjsdatepickerangular-uiangular-ui-datepicker

Setting up a retrieval callback in mongoose and storing it in a global variable

Is there a way to set the value of db as a global variable? I am having trouble with getting the console output of name outside of the findOne function, it keeps showing me undefined. Any suggestions on how to fix this issue? var name; schema.findone({na ...

javascriptnode.jsmongodbexpressmongoose

Guide to swapping out the variables "labels" in JavaScript

Here is the object structure: { 'File_12345.ZLM': { MeterID_12345: { BASIC_INFO: [Object] } } } { 'File_678910.ZLM': { MeterID_678910: { BASIC_INFO: [Object], } } } ======================== ...

javascriptnode.jsarraysjson

Attempting to configure a discord bot. Can anyone help me identify the issue?

I've been working on setting up a discord bot using Discord.js. I have all the necessary tools installed - Node.js, Discord.js, and Visual Studio Code. I've even created an application and obtained a token for my bot. However, I'm running in ...

javascriptnode.jsdiscorddiscord.js

"Enhancing the appearance of mat-sidenav elements in Angular Material 7 with customized

Our previous dom-structure before upgrading to Angular 7 and Material 7 looked like this: <mat-sidenav-container> <mat-sidenav #sidenav mode="side" [opened]="sideNavOpen"> <ul> <li> <a mat-icon-button color ...

angularsassangular-materialmaterial-designangular7

I'm having trouble with the calculator, unable to identify the issue (Typescript)

I'm struggling with programming a calculator for my class. I followed the instructions from our lesson, but it's not functioning properly and I can't pinpoint the issue. I just need a hint on where the problem might be located. The calculat ...

javascripthtmltypescriptcalculator

Interacting between frames with jQuery

I have main_page.htm with the following frameset structure: <frameset rows="30,*" frameborder=0 border=0> <frame name="top_frame" src="top.htm"> <frame name="bottom_frame" src="bottom.htm"> </frameset> The content in ...

javascriptjqueryhtmlframe

Ensuring the legitimacy of Rails form submissions

I am encountering an issue with validating a form before submitting it, as the form is being submitted without triggering the jQuery part. <%= form_for(:session,class:"form-signin form-horizontal",:id=> "form",:role=> "form") do |f| %> & ...

javascriptjqueryruby-on-railsformsvalidation

Leveraging and utilizing TypeScript npm packages

My goal is to create shared code in TypeScript, package it as an npm package, and easily install it. I attempted to create an external library like this: export class Lib { constructor(){ } getData(){ console.log('getting data from l ...

javascripttypescriptnpm

Converting data types when transferring a JavaScript variable to a PHP variable

I have a boolean value stored in a JavaScript variable var value=true; alert(typeof(value)); //Output: boolean I need to pass this variable to a PHP file through AJAX $.ajax({ type: 'POST', data: {value:value}, url: 'ajax.php& ...

javascriptphpjqueryajax