<!doctype html>
<
html
amp>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>Google AMP amp-bind</
title
>
<
link
rel
=
"canonical"
href
=
<
meta
name
=
"viewport"
content
=
"width=device-width,minimum-scale=1,initial-scale=1"
>
<
script
async
src
=
</
script
>
<
script
async
custom-element
=
"amp-bind"
</
script
>
<
style
amp-boilerplate>
body {
-webkit-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</
style
>
<
noscript
>
<
style
amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</
style
>
</
noscript
>
<
style
amp-custom>
h1 {
color: forestgreen;
text-align: center;
}
.gfgNew {
border: 5px solid crimson;
}
.gfgOld {
border: 5px solid orange;
}
</
style
>
</
head
>
<
body
>
<
h1
>
Geeks For Geeks
</
h1
>
<
amp-state
id
=
"gfg"
>
<
script
type
=
"application/json"
>
{
"new": {
"imageUrl":
"style": "gfgNew"
},
"old": {
"imageUrl":
"style": "gfgOld"
}
}
</
script
>
</
amp-state
>
<
div
style
=
"padding: 1em;"
>
<
p
>
Each logo has different border color...
</
p
>
<
h4
="'This is ' + logo + ' logo...'">
This is old logo...
</
h4
>
<
center
>
<
amp-img
width
=
"200"
height
=
"200"
src
=
[src]="gfg[logo].imageUrl"
class
=
"gfgOld"
[class]="gfg[logo].style">
</
amp-img
>
<
br
>
<
button
on
=
"tap:AMP.setState({logo: 'new'})"
>
New Logo
</
button
>
<
button
on
=
"tap:AMP.setState({logo: 'old'})"
>
Old Logo
</
button
>
</
center
>
</
div
>
</
body
>
</
html
>