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

AngularJS array not refreshing following an AJAX request

Currently, I am still in the process of familiarizing myself with Angularjs and actively learning about its functionalities. One issue I have encountered is that when I define an array and loop through it using "ng-repeat," the items within ng-repeat fail ...

javascriptajaxangularjsangularjs-scopeangularjs-ng-repeat

Rendering nested routes in Vue router with the parent component

I attempted to nest my routes using Vue router, but encountered some difficulties { path: '/admin', name: 'Admin', component: () => import('pages/Admin'), children:[ { path: 'stock', name: ' ...

javascriptvue.jsvue-componentvue-router

Encountering a Conflict with NPM Peer Dependencies

I recently started learning AngularJS through a tutorial, even though I am completely new to it. Here is the tutorial I have been following: https://www.youtube.com/watch?v=ofASsumsf7E However, I encountered an issue when running the npm install command. ...

angularjsnode.jsgitgithubnpm

Tax calculator that combines item prices and applies tax multiplication

Struggling to crack the code for my calculator. Despite consulting my textbook, I can't seem to figure out why it won't calculate properly. Any advice or tips would be greatly appreciated. <html> <head> <title> Total Calculator ...

javascriptdom-events

When trying to access a URL in a next.js application using the fetch() function, the router encountered an

I recently started working on a frontend project using Next.js v13.4 app router, with an additional backend. I have organized my routes and related functionalities in the api folder within the app directory. However, when I attempt to use the fetch() funct ...

javascriptreactjsnext.jsfetch-apiapp-router

Capture and handle JavaScript errors within iframes specified with the srcDoc attribute

My current project involves creating a React component that can render any HTML/JavaScript content within an iframe using the srcDoc attribute. The challenge I am facing is implementing an error handling system to display a message instead of the iframe ...

javascriptreactjstypescript

Leveraging React Hooks' useEffect to trigger a prop callback function defined with useCallback

Currently, I am working on developing a versatile infinite scrolling feature using React Hooks along with the ResearchGate React Intersection Observer. The main concept revolves around a parent passing down a mapped JSX array of data and a callback functio ...

javascriptreactjsreact-hooksrace-conditionuse-effect

What is the method for attaching multiple listeners to an element?

For example: v-on:click="count,handle" I posted this question in the Vue gitter channel, but received advice to use a single listener that triggers others. If using one listener is the recommended approach, I am curious to understand why. Is having multi ...

javascriptvue.js

Is there a way to disable automatic spacing in VS code for a React file?

I am currently working on my code in VS Code within my JSX file, but I keep encountering an error. The issue seems to be that the closing tag < /h1> is not being recognized. I have attempted multiple methods to prevent this automatic spacing, but so ...

javascriptreactjsjsx

Show an Angular Mat Card beneath the Input Field and position it on top of all other div elements

I am designing a signup page and I need to include a material card below the password field with checkboxes for password requirements. The challenge is that when the card appears, it pushes down all other elements such as the sign-up button. I want the ca ...

htmlcssangularangular-material

Button to close Jquery Dialog

I've set up a custom alert UI using jQuery UI, but I'm having trouble getting the close button to work properly. Here's my code snippet where I'm trying to override the default alert() function with jQuery UI dialog as described in this ...

javascriptjqueryasp.net-mvc

Different methods of transferring PHP post information to JavaScript

Is there a cleaner and more elegant way to pass posted PHP variables to JavaScript for manipulation, rather than using inline JavaScript? I currently have a simple PHP form that posts data to specific variables and then uses inline JavaScript to handle the ...

phpjavascripthtml

Achieving uniform width in material ui: Tips for maintaining consistency

I am encountering an issue with the width of my Goal components and can't figure out what is causing it. https://i.stack.imgur.com/jPlyf.png Despite setting the width of the Paper selector to 100%, each Goal component's width remains inconsiste ...

javascriptreactjsmaterial-uijss

Independent Dropbox Collections

Query: function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for (var i = 0; i < colCount; i++) { var ...

javascriptjqueryajax

Exploring the capabilities of an Angular factory

I am facing challenges in improving the unit test coverage of an Angular project, particularly when trying to test an AngularJS factory with multiple dependencies. The factory I am working on has 5 dependencies, and I am struggling to even write a basic t ...

angularjsunit-testingjasminekarma-jasmine

What is the process for changing to a different page in NativeScript?

Having trouble creating a simple button in NativeScript labeled 'login'? I've created a login component, but when testing the code, it shows an error stating "no known component for element Login." <template> <Page> <TabV ...

javascriptvue.jsnativescriptnativenativescript-vue

What could be causing BeautifulSoup to overlook certain elements on the page?

For practice, I am in the process of developing an Instagram web scraper. To handle dynamic webpages, I have opted to utilize Selenium. The webpage is loaded using: driver.execute_script("return document.documentElement.outerHTML") (Using this javascript ...

javascriptpythonseleniumweb-scrapingbeautifulsoup

How to iterate through the elements of an object within an array using Vue.js and TypeScript

There was an issue with rendering the form due to a TypeError: Cannot read properties of undefined (reading '0'). This error occurred at line 190 in the code for form1.vue. The error is also caught as a promise rejection. Error Occurred <inpu ...

javascripttypescriptvue.js

Is there a way to access the HTML and CSS source code without using the inspect feature

I'm working on a project that involves an "edit box" where users can write text, add emojis, change the background color, insert images, and more. After users finish creating their content, I want them to be able to send it via email. This means I ne ...

javascripthtmlcss

The $watch function in Angular.js seems to be failing to trigger

Through my exploration, I have discovered that the $scope.$watch function does not activate when the target value remains the same as its current value. To demonstrate this behavior, I have constructed a sample JSFiddle (http://jsfiddle.net/VKHVq/). Try ...

angularjs