Search code examples
htmlcssangularmaterialize

Dynamically grow a div container on button press?


I am working on the front end of a website using Angular 6 and the Materialize Framework for practice/training. I am very new to this type of development. I like the use of cards in Materialize and would like after a card reveal to have a button on the card that could grow the card to the size of the screen to make reading all the information easier. Any help is much appreciated thank you!


Solution

  • There are several ways to achieve this, one way is applying a different class to the card depending on a variable (which changes on button click), you do this with [class.big]="cardSize==='big'" or [class.small]="cardSize==='small'"

    Please see this working example so you can undestand better.

    https://stackblitz.com/edit/angular-wa4yhh