conditionally_hiding_an_element

Conditionally hiding an element

Shows conditional boolean attributes using the ?= syntax.

The code

• my_element.dart: The Dart code for <my-element>
• my_element.html: The HTML code for <my-element>
• index.html: An HTML file that uses <my-element>

How it works

You can set an element's hidden property using hidden$=. For example:

<p hidden$="{{shortView}}">
  ...
</p>

If shortView is true the paragraph is displayed, otherwise the paragraph is hidden.

The MyElement class (my_element.dart) defines the toggleView method which toggles the boolean variable, shortView. This variable must be defined as observable.

@property bool shortView = true;

@reflectable
void toggleView([_, __]) {
  set('shortView', !this.shortView);
}

The template code (my_element.html) defines a paragraph where the hidden tag is bound to the value of shortView.

The Big Lebowski

'Dude' Lebowski, mistaken for a millionaire Lebowski, seeks restitution for his ruined rug and enlists his bowling buddies to help get it.

Toggle View

Tapping the provided button calls the toggleView method, which toggles the display of the paragraph.

More information

• conditionally-hiding-an-element.html: The JavaScript version of this example