Multiple dynamic classes with amp-bind

Question

How do you include multiple dynamic classes in amp-bind?

For example:

<div [class]="condition1 ? 'classA' : 'classB'" [class]="condition2 ? 'classA' : 'classD'"></div>

score 5 · Accepted Answer · answered Mar 13 '18 at 09:37

5

You can return a single string containing multiple classes inside your amp-bind expression:

<div [class]="(condition1 ? 'classA' : 'classB') + ' ' + (condition2 ? 'classA' : 'classD')">...</div>

answered Mar 13 '18 at 09:37

Sebastian Benz

For example, such code I write when the second class I get through amp-bind-macro: `[class]="'seat-data' + ' ' + getStringPart(ampState.seatsArray[ampState.active], '2')"` – Alexandr Kazakov Aug 06 '19 at 17:38

score 0 · Answer 2 · answered Mar 13 '18 at 11:28

If you are referring to CSS classes, you can refer here.

The following CSS classes specifically amp-referrer-* and amp-viewer adds to the AMP Dynamic CSS Classes extension's <body> element.

You can can out the sample project provided here to have a view on how it is implemented.

2 Answers2