[{"data":1,"prerenderedAt":5575},["Reactive",2],{"content-query-AU2OY9ZUqX":3,"series-all":34,"series-featured":46,"articles-all":48,"articles-latest":5348},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"published":10,"readTime":11,"slug":12,"seriesId":13,"seriesOrder":14,"body":15,"_type":29,"_id":30,"_source":31,"_file":32,"_extension":33},"/articles/data-science-r-intro","articles",false,"","Introduction to Data Science with R","Intro to data science with R","2025/09/11",5,"data-science-r-intro","data_science_r",1,{"type":16,"children":17,"toc":26},"root",[18],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","Intro to data science with r",{"title":7,"searchDepth":27,"depth":27,"links":28},2,[],"markdown","content:articles:data-science-r-intro.md","content","articles/data-science-r-intro.md","md",[35],{"_path":36,"_dir":37,"_draft":6,"_partial":6,"_locale":7,"id":13,"name":38,"description":39,"thumbnail":40,"featured":41,"_id":42,"_type":43,"title":44,"_source":31,"_file":45,"_extension":43},"/series/data_science_r","series","Data Science With R","Intro to Data Science with R","/series/data_science_r.png",true,"content:series:data_science_r.json","json","DataScienceR","series/data_science_r.json",[47],{"_path":36,"_dir":37,"_draft":6,"_partial":6,"_locale":7,"id":13,"name":38,"description":39,"thumbnail":40,"featured":41,"_id":42,"_type":43,"title":44,"_source":31,"_file":45,"_extension":43},[49,339,348,682],{"_path":50,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":51,"description":52,"published":53,"readTime":11,"slug":54,"seriesId":13,"seriesOrder":27,"body":55,"_type":29,"_id":337,"_source":31,"_file":338,"_extension":33},"/articles/data-science-r-setup","Setting up the working machine","Setup working environment for the series data science with R","2025/09/12","data-science-r-setup",{"type":16,"children":56,"toc":326},[57,62,69,76,158,164,224,230,283,289,294,308,314,320],{"type":19,"tag":20,"props":58,"children":59},{},[60],{"type":24,"value":61},"This series",{"type":19,"tag":63,"props":64,"children":66},"h2",{"id":65},"installing-r",[67],{"type":24,"value":68},"Installing R",{"type":19,"tag":70,"props":71,"children":73},"h3",{"id":72},"windows",[74],{"type":24,"value":75},"Windows",{"type":19,"tag":77,"props":78,"children":79},"ol",{},[80,97,122,146],{"type":19,"tag":81,"props":82,"children":83},"li",{},[84,86,95],{"type":24,"value":85},"Go to the ",{"type":19,"tag":87,"props":88,"children":92},"a",{"href":89,"rel":90},"https://cran.r-project.org/",[91],"nofollow",[93],{"type":24,"value":94},"CRAN website",{"type":24,"value":96},".",{"type":19,"tag":81,"props":98,"children":99},{},[100,102,108,110,115,116,121],{"type":24,"value":101},"Click ",{"type":19,"tag":103,"props":104,"children":105},"strong",{},[106],{"type":24,"value":107},"Download R for Windows",{"type":24,"value":109}," → ",{"type":19,"tag":103,"props":111,"children":112},{},[113],{"type":24,"value":114},"base",{"type":24,"value":109},{"type":19,"tag":103,"props":117,"children":118},{},[119],{"type":24,"value":120},"install R for the first time",{"type":24,"value":96},{"type":19,"tag":81,"props":123,"children":124},{},[125,127],{"type":24,"value":126},"Run the installer and follow the setup wizard:\n",{"type":19,"tag":128,"props":129,"children":130},"ul",{},[131,136,141],{"type":19,"tag":81,"props":132,"children":133},{},[134],{"type":24,"value":135},"Choose installation directory (default is fine).",{"type":19,"tag":81,"props":137,"children":138},{},[139],{"type":24,"value":140},"Select components (default is fine).",{"type":19,"tag":81,"props":142,"children":143},{},[144],{"type":24,"value":145},"Pick language and shortcuts.",{"type":19,"tag":81,"props":147,"children":148},{},[149,151,156],{"type":24,"value":150},"Once installed, open ",{"type":19,"tag":103,"props":152,"children":153},{},[154],{"type":24,"value":155},"R",{"type":24,"value":157}," from the Start Menu or search for “R”.",{"type":19,"tag":70,"props":159,"children":161},{"id":160},"macos",[162],{"type":24,"value":163},"macOS",{"type":19,"tag":77,"props":165,"children":166},{},[167,177,187,201,213],{"type":19,"tag":81,"props":168,"children":169},{},[170,171,176],{"type":24,"value":85},{"type":19,"tag":87,"props":172,"children":174},{"href":89,"rel":173},[91],[175],{"type":24,"value":94},{"type":24,"value":96},{"type":19,"tag":81,"props":178,"children":179},{},[180,181,186],{"type":24,"value":101},{"type":19,"tag":103,"props":182,"children":183},{},[184],{"type":24,"value":185},"Download R for macOS",{"type":24,"value":96},{"type":19,"tag":81,"props":188,"children":189},{},[190,192,199],{"type":24,"value":191},"Download the ",{"type":19,"tag":193,"props":194,"children":196},"code",{"className":195},[],[197],{"type":24,"value":198},".pkg",{"type":24,"value":200}," file for the latest release.",{"type":19,"tag":81,"props":202,"children":203},{},[204,206,211],{"type":24,"value":205},"Double-click the ",{"type":19,"tag":193,"props":207,"children":209},{"className":208},[],[210],{"type":24,"value":198},{"type":24,"value":212}," file and follow the installer instructions.",{"type":19,"tag":81,"props":214,"children":215},{},[216,218,222],{"type":24,"value":217},"After installation, open ",{"type":19,"tag":103,"props":219,"children":220},{},[221],{"type":24,"value":155},{"type":24,"value":223}," from Launchpad or Finder → Applications.",{"type":19,"tag":70,"props":225,"children":227},{"id":226},"linux-ubuntu-debian",[228],{"type":24,"value":229},"Linux - Ubuntu / Debian",{"type":19,"tag":231,"props":232,"children":236},"pre",{"className":233,"code":234,"language":235,"meta":7,"style":7},"language-shell shiki shiki-themes night-owl","sudo apt update\nsudo apt install r-base\n","shell",[237],{"type":19,"tag":193,"props":238,"children":239},{"__ignoreMap":7},[240,262],{"type":19,"tag":241,"props":242,"children":244},"span",{"class":243,"line":14},"line",[245,251,257],{"type":19,"tag":241,"props":246,"children":248},{"style":247},"--shiki-default:#82AAFF;--shiki-default-font-style:italic",[249],{"type":24,"value":250},"sudo",{"type":19,"tag":241,"props":252,"children":254},{"style":253},"--shiki-default:#ECC48D",[255],{"type":24,"value":256}," apt",{"type":19,"tag":241,"props":258,"children":259},{"style":253},[260],{"type":24,"value":261}," update\n",{"type":19,"tag":241,"props":263,"children":264},{"class":243,"line":27},[265,269,273,278],{"type":19,"tag":241,"props":266,"children":267},{"style":247},[268],{"type":24,"value":250},{"type":19,"tag":241,"props":270,"children":271},{"style":253},[272],{"type":24,"value":256},{"type":19,"tag":241,"props":274,"children":275},{"style":253},[276],{"type":24,"value":277}," install",{"type":19,"tag":241,"props":279,"children":280},{"style":253},[281],{"type":24,"value":282}," r-base\n",{"type":19,"tag":70,"props":284,"children":286},{"id":285},"verify-installation",[287],{"type":24,"value":288},"Verify Installation",{"type":19,"tag":20,"props":290,"children":291},{},[292],{"type":24,"value":293},"To check that R is installed correctly, open a R console and run:",{"type":19,"tag":231,"props":295,"children":297},{"className":233,"code":296,"language":235,"meta":7,"style":7},"version\n",[298],{"type":19,"tag":193,"props":299,"children":300},{"__ignoreMap":7},[301],{"type":19,"tag":241,"props":302,"children":303},{"class":243,"line":14},[304],{"type":19,"tag":241,"props":305,"children":306},{"style":247},[307],{"type":24,"value":296},{"type":19,"tag":63,"props":309,"children":311},{"id":310},"installing-and-configuring-your-preferred-ide",[312],{"type":24,"value":313},"Installing and configuring your preferred IDE",{"type":19,"tag":63,"props":315,"children":317},{"id":316},"installing-base-packages",[318],{"type":24,"value":319},"Installing base packages",{"type":19,"tag":321,"props":322,"children":323},"style",{},[324],{"type":24,"value":325},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":27,"depth":27,"links":327},[328,335,336],{"id":65,"depth":27,"text":68,"children":329},[330,332,333,334],{"id":72,"depth":331,"text":75},3,{"id":160,"depth":331,"text":163},{"id":226,"depth":331,"text":229},{"id":285,"depth":331,"text":288},{"id":310,"depth":27,"text":313},{"id":316,"depth":27,"text":319},"content:articles:data-science-r-setup.md","articles/data-science-r-setup.md",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"published":10,"readTime":11,"slug":12,"seriesId":13,"seriesOrder":14,"body":340,"_type":29,"_id":30,"_source":31,"_file":32,"_extension":33},{"type":16,"children":341,"toc":346},[342],{"type":19,"tag":20,"props":343,"children":344},{},[345],{"type":24,"value":25},{"title":7,"searchDepth":27,"depth":27,"links":347},[],{"_path":349,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":350,"description":7,"published":351,"readTime":27,"slug":352,"hasCover":41,"seriesId":7,"body":353,"_type":29,"_id":680,"_source":31,"_file":681,"_extension":33},"/articles/cross-platform-code-deployment","Cross-Platform Code Deployment: GitHub & GitLab","2024/04/28","cross-platform-code-deployment",{"type":16,"children":354,"toc":676},[355,381,386,392,397,413,448,460,492,497,544,550,555,560,617,667,672],{"type":19,"tag":20,"props":356,"children":357},{},[358,360,365,367,372,374,379],{"type":24,"value":359},"Sometimes you might end up in a situation where you have source code that you want to push to multiple git platforms:\n",{"type":19,"tag":103,"props":361,"children":362},{},[363],{"type":24,"value":364},"GitHub",{"type":24,"value":366},", ",{"type":19,"tag":103,"props":368,"children":369},{},[370],{"type":24,"value":371},"Gitlab",{"type":24,"value":373}," or ",{"type":19,"tag":103,"props":375,"children":376},{},[377],{"type":24,"value":378},"Bitbucket",{"type":24,"value":380},". Recently I ended up in the same situation because personally I prefer Gitlab to maintain\nmy projects, but at the same time GitHub is way more popular and I want to showcase my public repositories there as well.\nSo I needed an easy solution to push my code to both platforms.",{"type":19,"tag":20,"props":382,"children":383},{},[384],{"type":24,"value":385},"I'm 100 percent sure there are multiple ways to do that, but I will describe two options to achieve that below. Depending\non how you would like to manage the pushes, you can choose one of them.",{"type":19,"tag":70,"props":387,"children":389},{"id":388},"create-multiple-remotes",[390],{"type":24,"value":391},"Create multiple remotes",{"type":19,"tag":20,"props":393,"children":394},{},[395],{"type":24,"value":396},"In this approach you will be forced to push to each remote individually.",{"type":19,"tag":20,"props":398,"children":399},{},[400,402,411],{"type":24,"value":401},"The default remote of a git repository is named ",{"type":19,"tag":103,"props":403,"children":404},{},[405],{"type":19,"tag":406,"props":407,"children":408},"em",{},[409],{"type":24,"value":410},"origin",{"type":24,"value":412},". You will probably do something like this in the first steps of\nconfiguring your project:",{"type":19,"tag":231,"props":414,"children":416},{"className":233,"code":415,"language":235,"meta":7,"style":7},"git remote add origin git@gitlab.com:username/my-project.git\n",[417],{"type":19,"tag":193,"props":418,"children":419},{"__ignoreMap":7},[420],{"type":19,"tag":241,"props":421,"children":422},{"class":243,"line":14},[423,428,433,438,443],{"type":19,"tag":241,"props":424,"children":425},{"style":247},[426],{"type":24,"value":427},"git",{"type":19,"tag":241,"props":429,"children":430},{"style":253},[431],{"type":24,"value":432}," remote",{"type":19,"tag":241,"props":434,"children":435},{"style":253},[436],{"type":24,"value":437}," add",{"type":19,"tag":241,"props":439,"children":440},{"style":253},[441],{"type":24,"value":442}," origin",{"type":19,"tag":241,"props":444,"children":445},{"style":253},[446],{"type":24,"value":447}," git@gitlab.com:username/my-project.git\n",{"type":19,"tag":20,"props":449,"children":450},{},[451,453,458],{"type":24,"value":452},"So, the first solution is to ",{"type":19,"tag":103,"props":454,"children":455},{},[456],{"type":24,"value":457},"add a new remote",{"type":24,"value":459}," and achieve that by executing the following command:",{"type":19,"tag":231,"props":461,"children":463},{"className":233,"code":462,"language":235,"meta":7,"style":7},"git remote add origin-github git@github.com:username/my-project.git\n",[464],{"type":19,"tag":193,"props":465,"children":466},{"__ignoreMap":7},[467],{"type":19,"tag":241,"props":468,"children":469},{"class":243,"line":14},[470,474,478,482,487],{"type":19,"tag":241,"props":471,"children":472},{"style":247},[473],{"type":24,"value":427},{"type":19,"tag":241,"props":475,"children":476},{"style":253},[477],{"type":24,"value":432},{"type":19,"tag":241,"props":479,"children":480},{"style":253},[481],{"type":24,"value":437},{"type":19,"tag":241,"props":483,"children":484},{"style":253},[485],{"type":24,"value":486}," origin-github",{"type":19,"tag":241,"props":488,"children":489},{"style":253},[490],{"type":24,"value":491}," git@github.com:username/my-project.git\n",{"type":19,"tag":20,"props":493,"children":494},{},[495],{"type":24,"value":496},"And that's pretty much it. When it's time to push your code to the remote, you can execute it using one of the two commands\n(or both if you want to keep both repositories up-to-date):",{"type":19,"tag":231,"props":498,"children":500},{"className":233,"code":499,"language":235,"meta":7,"style":7},"git push origin main\ngit push origin-github main\n",[501],{"type":19,"tag":193,"props":502,"children":503},{"__ignoreMap":7},[504,525],{"type":19,"tag":241,"props":505,"children":506},{"class":243,"line":14},[507,511,516,520],{"type":19,"tag":241,"props":508,"children":509},{"style":247},[510],{"type":24,"value":427},{"type":19,"tag":241,"props":512,"children":513},{"style":253},[514],{"type":24,"value":515}," push",{"type":19,"tag":241,"props":517,"children":518},{"style":253},[519],{"type":24,"value":442},{"type":19,"tag":241,"props":521,"children":522},{"style":253},[523],{"type":24,"value":524}," main\n",{"type":19,"tag":241,"props":526,"children":527},{"class":243,"line":27},[528,532,536,540],{"type":19,"tag":241,"props":529,"children":530},{"style":247},[531],{"type":24,"value":427},{"type":19,"tag":241,"props":533,"children":534},{"style":253},[535],{"type":24,"value":515},{"type":19,"tag":241,"props":537,"children":538},{"style":253},[539],{"type":24,"value":486},{"type":19,"tag":241,"props":541,"children":542},{"style":253},[543],{"type":24,"value":524},{"type":19,"tag":70,"props":545,"children":547},{"id":546},"setup-multiple-push-urls-for-a-remote",[548],{"type":24,"value":549},"Setup multiple push urls for a remote",{"type":19,"tag":20,"props":551,"children":552},{},[553],{"type":24,"value":554},"If you are lazy, and let's be real, most of us, developers, are, you will want to set up the project to have multiple push\nurls for the origin remote. This, however works only if you are sure that you want to keep changes on both projects at the same\ntime.",{"type":19,"tag":20,"props":556,"children":557},{},[558],{"type":24,"value":559},"So, that you need to do is to set the push url on the remote two times: first one is the url of the original project and\nthe second one is the url of the second project on a different platform. The commands are:",{"type":19,"tag":231,"props":561,"children":563},{"className":233,"code":562,"language":235,"meta":7,"style":7},"# for the original project on gitlab\ngit remote set-url --add --push origin git@gitlab.com:username/my-project.git\n",[564],{"type":19,"tag":193,"props":565,"children":566},{"__ignoreMap":7},[567,582],{"type":19,"tag":241,"props":568,"children":569},{"class":243,"line":14},[570,576],{"type":19,"tag":241,"props":571,"children":573},{"style":572},"--shiki-default:#637777",[574],{"type":24,"value":575},"#",{"type":19,"tag":241,"props":577,"children":579},{"style":578},"--shiki-default:#637777;--shiki-default-font-style:italic",[580],{"type":24,"value":581}," for the original project on gitlab\n",{"type":19,"tag":241,"props":583,"children":584},{"class":243,"line":27},[585,589,593,598,604,609,613],{"type":19,"tag":241,"props":586,"children":587},{"style":247},[588],{"type":24,"value":427},{"type":19,"tag":241,"props":590,"children":591},{"style":253},[592],{"type":24,"value":432},{"type":19,"tag":241,"props":594,"children":595},{"style":253},[596],{"type":24,"value":597}," set-url",{"type":19,"tag":241,"props":599,"children":601},{"style":600},"--shiki-default:#82AAFF",[602],{"type":24,"value":603}," --add",{"type":19,"tag":241,"props":605,"children":606},{"style":600},[607],{"type":24,"value":608}," --push",{"type":19,"tag":241,"props":610,"children":611},{"style":253},[612],{"type":24,"value":442},{"type":19,"tag":241,"props":614,"children":615},{"style":253},[616],{"type":24,"value":447},{"type":19,"tag":231,"props":618,"children":620},{"className":233,"code":619,"language":235,"meta":7,"style":7},"# for the second project on github\ngit remote set-url --add --push origin git@github.com:username/my-project.git\n",[621],{"type":19,"tag":193,"props":622,"children":623},{"__ignoreMap":7},[624,636],{"type":19,"tag":241,"props":625,"children":626},{"class":243,"line":14},[627,631],{"type":19,"tag":241,"props":628,"children":629},{"style":572},[630],{"type":24,"value":575},{"type":19,"tag":241,"props":632,"children":633},{"style":578},[634],{"type":24,"value":635}," for the second project on github\n",{"type":19,"tag":241,"props":637,"children":638},{"class":243,"line":27},[639,643,647,651,655,659,663],{"type":19,"tag":241,"props":640,"children":641},{"style":247},[642],{"type":24,"value":427},{"type":19,"tag":241,"props":644,"children":645},{"style":253},[646],{"type":24,"value":432},{"type":19,"tag":241,"props":648,"children":649},{"style":253},[650],{"type":24,"value":597},{"type":19,"tag":241,"props":652,"children":653},{"style":600},[654],{"type":24,"value":603},{"type":19,"tag":241,"props":656,"children":657},{"style":600},[658],{"type":24,"value":608},{"type":19,"tag":241,"props":660,"children":661},{"style":253},[662],{"type":24,"value":442},{"type":19,"tag":241,"props":664,"children":665},{"style":253},[666],{"type":24,"value":491},{"type":19,"tag":20,"props":668,"children":669},{},[670],{"type":24,"value":671},"And that's it. You are good to go! :)",{"type":19,"tag":321,"props":673,"children":674},{},[675],{"type":24,"value":325},{"title":7,"searchDepth":27,"depth":27,"links":677},[678,679],{"id":388,"depth":331,"text":391},{"id":546,"depth":331,"text":549},"content:articles:cross-platform-code-deployment.md","articles/cross-platform-code-deployment.md",{"_path":683,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":684,"description":684,"published":685,"readTime":11,"slug":686,"github":687,"videoId":688,"hasCover":41,"body":689,"_type":29,"_id":5346,"_source":31,"_file":5347,"_extension":33},"/articles/wiggle-animation","Wiggle Animation using CSS and Angular Animations","2024/04/07","wiggle-animation","OwlHowl3/wiggle-animation-angular","4X24t9keUVg",{"type":16,"children":690,"toc":5338},[691,709,714,720,747,872,877,1077,1082,1087,1414,1425,1718,1723,1735,2028,2034,2039,2067,2225,2238,2544,2550,2577,2865,2870,2966,2972,2992,3123,3134,3186,3203,3288,3327,3598,3610,3936,3959,4297,4310,4472,4478,4490,4871,4889,5073,5091,5303,5308,5314,5334],{"type":19,"tag":20,"props":692,"children":693},{},[694,696,701,703,708],{"type":24,"value":695},"Ever wondered how those app icons on your iPhone or MacBook wiggle so charmingly? Or what makes that playful animation\npop up when you type a wrong word in Wordle? Well, it's very simple and it's all about a minimal animation. This article\nshows how to create a simple animation using plain ",{"type":19,"tag":103,"props":697,"children":698},{},[699],{"type":24,"value":700},"CSS",{"type":24,"value":702}," and then proceeds with ",{"type":19,"tag":103,"props":704,"children":705},{},[706],{"type":24,"value":707},"Angular animations",{"type":24,"value":96},{"type":19,"tag":20,"props":710,"children":711},{},[712],{"type":24,"value":713},"Before we start, you might wonder why would you need such a functionality? Right of the top of my head, you can include\nthose into the validation process of some fields, or you might use them as a mean to gather users' attention.",{"type":19,"tag":70,"props":715,"children":717},{"id":716},"simple-css-solution",[718],{"type":24,"value":719},"Simple CSS Solution",{"type":19,"tag":20,"props":721,"children":722},{},[723,725,731,733,738,740,745],{"type":24,"value":724},"Let's start by creating a new angular component using ",{"type":19,"tag":193,"props":726,"children":728},{"className":727},[],[729],{"type":24,"value":730},"ng g c wiggle-css",{"type":24,"value":732},". In the template file we will add a simple\nlabel and a button that will be further animated. The button will have two classes - ",{"type":19,"tag":406,"props":734,"children":735},{},[736],{"type":24,"value":737},"button",{"type":24,"value":739}," for general styling and\n",{"type":19,"tag":406,"props":741,"children":742},{},[743],{"type":24,"value":744},"wiggle",{"type":24,"value":746}," that will be responsible for the animation.",{"type":19,"tag":231,"props":748,"children":752},{"className":749,"code":750,"language":751,"meta":7,"style":7},"language-html shiki shiki-themes night-owl","\u003C!-- wiggle-css.component.html -->\n\u003Cdiv>Pure CSS\u003C/div>\n\u003Cbutton class=\"button wiggle\">Hey!\u003C/button>\n","html",[753],{"type":19,"tag":193,"props":754,"children":755},{"__ignoreMap":7},[756,774,814],{"type":19,"tag":241,"props":757,"children":758},{"class":243,"line":14},[759,764,769],{"type":19,"tag":241,"props":760,"children":761},{"style":572},[762],{"type":24,"value":763},"\u003C!--",{"type":19,"tag":241,"props":765,"children":766},{"style":578},[767],{"type":24,"value":768}," wiggle-css.component.html ",{"type":19,"tag":241,"props":770,"children":771},{"style":572},[772],{"type":24,"value":773},"-->\n",{"type":19,"tag":241,"props":775,"children":776},{"class":243,"line":27},[777,783,789,794,800,805,809],{"type":19,"tag":241,"props":778,"children":780},{"style":779},"--shiki-default:#7FDBCA",[781],{"type":24,"value":782},"\u003C",{"type":19,"tag":241,"props":784,"children":786},{"style":785},"--shiki-default:#CAECE6",[787],{"type":24,"value":788},"div",{"type":19,"tag":241,"props":790,"children":791},{"style":779},[792],{"type":24,"value":793},">",{"type":19,"tag":241,"props":795,"children":797},{"style":796},"--shiki-default:#D6DEEB",[798],{"type":24,"value":799},"Pure CSS",{"type":19,"tag":241,"props":801,"children":802},{"style":779},[803],{"type":24,"value":804},"\u003C/",{"type":19,"tag":241,"props":806,"children":807},{"style":785},[808],{"type":24,"value":788},{"type":19,"tag":241,"props":810,"children":811},{"style":779},[812],{"type":24,"value":813},">\n",{"type":19,"tag":241,"props":815,"children":816},{"class":243,"line":331},[817,821,825,831,836,842,847,851,855,860,864,868],{"type":19,"tag":241,"props":818,"children":819},{"style":779},[820],{"type":24,"value":782},{"type":19,"tag":241,"props":822,"children":823},{"style":785},[824],{"type":24,"value":737},{"type":19,"tag":241,"props":826,"children":828},{"style":827},"--shiki-default:#C5E478;--shiki-default-font-style:italic",[829],{"type":24,"value":830}," class",{"type":19,"tag":241,"props":832,"children":833},{"style":779},[834],{"type":24,"value":835},"=",{"type":19,"tag":241,"props":837,"children":839},{"style":838},"--shiki-default:#D9F5DD",[840],{"type":24,"value":841},"\"",{"type":19,"tag":241,"props":843,"children":844},{"style":253},[845],{"type":24,"value":846},"button wiggle",{"type":19,"tag":241,"props":848,"children":849},{"style":838},[850],{"type":24,"value":841},{"type":19,"tag":241,"props":852,"children":853},{"style":779},[854],{"type":24,"value":793},{"type":19,"tag":241,"props":856,"children":857},{"style":796},[858],{"type":24,"value":859},"Hey!",{"type":19,"tag":241,"props":861,"children":862},{"style":779},[863],{"type":24,"value":804},{"type":19,"tag":241,"props":865,"children":866},{"style":785},[867],{"type":24,"value":737},{"type":19,"tag":241,"props":869,"children":870},{"style":779},[871],{"type":24,"value":813},{"type":19,"tag":20,"props":873,"children":874},{},[875],{"type":24,"value":876},"With the template in place, let's move on to the styling and update the component css file like this:",{"type":19,"tag":231,"props":878,"children":882},{"className":879,"code":880,"language":881,"meta":7,"style":7},"language-css shiki shiki-themes night-owl","/* wiggle-css.component.scss */\n:host {\n  width: 50vw;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 1rem;\n}\n","css",[883],{"type":19,"tag":193,"props":884,"children":885},{"__ignoreMap":7},[886,904,923,954,977,998,1019,1041,1068],{"type":19,"tag":241,"props":887,"children":888},{"class":243,"line":14},[889,894,899],{"type":19,"tag":241,"props":890,"children":891},{"style":572},[892],{"type":24,"value":893},"/*",{"type":19,"tag":241,"props":895,"children":896},{"style":578},[897],{"type":24,"value":898}," wiggle-css.component.scss ",{"type":19,"tag":241,"props":900,"children":901},{"style":572},[902],{"type":24,"value":903},"*/\n",{"type":19,"tag":241,"props":905,"children":906},{"class":243,"line":27},[907,913,918],{"type":19,"tag":241,"props":908,"children":910},{"style":909},"--shiki-default:#C5E478",[911],{"type":24,"value":912},":",{"type":19,"tag":241,"props":914,"children":915},{"style":827},[916],{"type":24,"value":917},"host",{"type":19,"tag":241,"props":919,"children":920},{"style":796},[921],{"type":24,"value":922}," {\n",{"type":19,"tag":241,"props":924,"children":925},{"class":243,"line":331},[926,932,937,943,949],{"type":19,"tag":241,"props":927,"children":929},{"style":928},"--shiki-default:#80CBC4",[930],{"type":24,"value":931},"  width",{"type":19,"tag":241,"props":933,"children":934},{"style":796},[935],{"type":24,"value":936},": ",{"type":19,"tag":241,"props":938,"children":940},{"style":939},"--shiki-default:#F78C6C",[941],{"type":24,"value":942},"50",{"type":19,"tag":241,"props":944,"children":946},{"style":945},"--shiki-default:#FFEB95",[947],{"type":24,"value":948},"vw",{"type":19,"tag":241,"props":950,"children":951},{"style":796},[952],{"type":24,"value":953},";\n",{"type":19,"tag":241,"props":955,"children":957},{"class":243,"line":956},4,[958,963,967,973],{"type":19,"tag":241,"props":959,"children":960},{"style":928},[961],{"type":24,"value":962},"  display",{"type":19,"tag":241,"props":964,"children":965},{"style":796},[966],{"type":24,"value":936},{"type":19,"tag":241,"props":968,"children":970},{"style":969},"--shiki-default:#FF6363",[971],{"type":24,"value":972},"flex",{"type":19,"tag":241,"props":974,"children":975},{"style":796},[976],{"type":24,"value":953},{"type":19,"tag":241,"props":978,"children":979},{"class":243,"line":11},[980,985,989,994],{"type":19,"tag":241,"props":981,"children":982},{"style":928},[983],{"type":24,"value":984},"  align-items",{"type":19,"tag":241,"props":986,"children":987},{"style":796},[988],{"type":24,"value":936},{"type":19,"tag":241,"props":990,"children":991},{"style":969},[992],{"type":24,"value":993},"center",{"type":19,"tag":241,"props":995,"children":996},{"style":796},[997],{"type":24,"value":953},{"type":19,"tag":241,"props":999,"children":1001},{"class":243,"line":1000},6,[1002,1007,1011,1015],{"type":19,"tag":241,"props":1003,"children":1004},{"style":928},[1005],{"type":24,"value":1006},"  justify-content",{"type":19,"tag":241,"props":1008,"children":1009},{"style":796},[1010],{"type":24,"value":936},{"type":19,"tag":241,"props":1012,"children":1013},{"style":969},[1014],{"type":24,"value":993},{"type":19,"tag":241,"props":1016,"children":1017},{"style":796},[1018],{"type":24,"value":953},{"type":19,"tag":241,"props":1020,"children":1022},{"class":243,"line":1021},7,[1023,1028,1032,1037],{"type":19,"tag":241,"props":1024,"children":1025},{"style":928},[1026],{"type":24,"value":1027},"  flex-direction",{"type":19,"tag":241,"props":1029,"children":1030},{"style":796},[1031],{"type":24,"value":936},{"type":19,"tag":241,"props":1033,"children":1034},{"style":969},[1035],{"type":24,"value":1036},"column",{"type":19,"tag":241,"props":1038,"children":1039},{"style":796},[1040],{"type":24,"value":953},{"type":19,"tag":241,"props":1042,"children":1044},{"class":243,"line":1043},8,[1045,1050,1054,1059,1064],{"type":19,"tag":241,"props":1046,"children":1047},{"style":928},[1048],{"type":24,"value":1049},"  gap",{"type":19,"tag":241,"props":1051,"children":1052},{"style":796},[1053],{"type":24,"value":936},{"type":19,"tag":241,"props":1055,"children":1056},{"style":939},[1057],{"type":24,"value":1058},"1",{"type":19,"tag":241,"props":1060,"children":1061},{"style":945},[1062],{"type":24,"value":1063},"rem",{"type":19,"tag":241,"props":1065,"children":1066},{"style":796},[1067],{"type":24,"value":953},{"type":19,"tag":241,"props":1069,"children":1071},{"class":243,"line":1070},9,[1072],{"type":19,"tag":241,"props":1073,"children":1074},{"style":796},[1075],{"type":24,"value":1076},"}\n",{"type":19,"tag":20,"props":1078,"children":1079},{},[1080],{"type":24,"value":1081},"First of all, let's add some styles to the component host. The combination of classes used above will make the content\nof the component go 50% width, all items will be centered and will be displayed vertically with some space between them.",{"type":19,"tag":20,"props":1083,"children":1084},{},[1085],{"type":24,"value":1086},"Moving on to the button - let's apply some general styles to it, so it will look prettier than the default html version.\nThe button class will look like this:",{"type":19,"tag":231,"props":1088,"children":1090},{"className":879,"code":1089,"language":881,"meta":7,"style":7},"/* wiggle-css.component.scss */\n.button {\n  color: rgb(255, 255, 255);\n  background-color: rgb(79 70 229);\n  border: none;\n  border-radius: 0.375rem;\n  font-weight: 600;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  padding: 0.5rem 0.75rem;\n  text-decoration: none;\n  cursor: pointer;\n}\n",[1091],{"type":19,"tag":193,"props":1092,"children":1093},{"__ignoreMap":7},[1094,1109,1124,1172,1211,1232,1257,1278,1303,1328,1363,1384,1406],{"type":19,"tag":241,"props":1095,"children":1096},{"class":243,"line":14},[1097,1101,1105],{"type":19,"tag":241,"props":1098,"children":1099},{"style":572},[1100],{"type":24,"value":893},{"type":19,"tag":241,"props":1102,"children":1103},{"style":578},[1104],{"type":24,"value":898},{"type":19,"tag":241,"props":1106,"children":1107},{"style":572},[1108],{"type":24,"value":903},{"type":19,"tag":241,"props":1110,"children":1111},{"class":243,"line":27},[1112,1116,1120],{"type":19,"tag":241,"props":1113,"children":1114},{"style":909},[1115],{"type":24,"value":96},{"type":19,"tag":241,"props":1117,"children":1118},{"style":827},[1119],{"type":24,"value":737},{"type":19,"tag":241,"props":1121,"children":1122},{"style":796},[1123],{"type":24,"value":922},{"type":19,"tag":241,"props":1125,"children":1126},{"class":243,"line":331},[1127,1132,1136,1141,1146,1151,1155,1159,1163,1167],{"type":19,"tag":241,"props":1128,"children":1129},{"style":928},[1130],{"type":24,"value":1131},"  color",{"type":19,"tag":241,"props":1133,"children":1134},{"style":796},[1135],{"type":24,"value":936},{"type":19,"tag":241,"props":1137,"children":1138},{"style":909},[1139],{"type":24,"value":1140},"rgb",{"type":19,"tag":241,"props":1142,"children":1143},{"style":796},[1144],{"type":24,"value":1145},"(",{"type":19,"tag":241,"props":1147,"children":1148},{"style":939},[1149],{"type":24,"value":1150},"255",{"type":19,"tag":241,"props":1152,"children":1153},{"style":796},[1154],{"type":24,"value":366},{"type":19,"tag":241,"props":1156,"children":1157},{"style":939},[1158],{"type":24,"value":1150},{"type":19,"tag":241,"props":1160,"children":1161},{"style":796},[1162],{"type":24,"value":366},{"type":19,"tag":241,"props":1164,"children":1165},{"style":939},[1166],{"type":24,"value":1150},{"type":19,"tag":241,"props":1168,"children":1169},{"style":796},[1170],{"type":24,"value":1171},");\n",{"type":19,"tag":241,"props":1173,"children":1174},{"class":243,"line":956},[1175,1180,1184,1188,1192,1197,1202,1207],{"type":19,"tag":241,"props":1176,"children":1177},{"style":928},[1178],{"type":24,"value":1179},"  background-color",{"type":19,"tag":241,"props":1181,"children":1182},{"style":796},[1183],{"type":24,"value":936},{"type":19,"tag":241,"props":1185,"children":1186},{"style":909},[1187],{"type":24,"value":1140},{"type":19,"tag":241,"props":1189,"children":1190},{"style":796},[1191],{"type":24,"value":1145},{"type":19,"tag":241,"props":1193,"children":1194},{"style":939},[1195],{"type":24,"value":1196},"79",{"type":19,"tag":241,"props":1198,"children":1199},{"style":939},[1200],{"type":24,"value":1201}," 70",{"type":19,"tag":241,"props":1203,"children":1204},{"style":939},[1205],{"type":24,"value":1206}," 229",{"type":19,"tag":241,"props":1208,"children":1209},{"style":796},[1210],{"type":24,"value":1171},{"type":19,"tag":241,"props":1212,"children":1213},{"class":243,"line":11},[1214,1219,1223,1228],{"type":19,"tag":241,"props":1215,"children":1216},{"style":928},[1217],{"type":24,"value":1218},"  border",{"type":19,"tag":241,"props":1220,"children":1221},{"style":796},[1222],{"type":24,"value":936},{"type":19,"tag":241,"props":1224,"children":1225},{"style":969},[1226],{"type":24,"value":1227},"none",{"type":19,"tag":241,"props":1229,"children":1230},{"style":796},[1231],{"type":24,"value":953},{"type":19,"tag":241,"props":1233,"children":1234},{"class":243,"line":1000},[1235,1240,1244,1249,1253],{"type":19,"tag":241,"props":1236,"children":1237},{"style":928},[1238],{"type":24,"value":1239},"  border-radius",{"type":19,"tag":241,"props":1241,"children":1242},{"style":796},[1243],{"type":24,"value":936},{"type":19,"tag":241,"props":1245,"children":1246},{"style":939},[1247],{"type":24,"value":1248},"0.375",{"type":19,"tag":241,"props":1250,"children":1251},{"style":945},[1252],{"type":24,"value":1063},{"type":19,"tag":241,"props":1254,"children":1255},{"style":796},[1256],{"type":24,"value":953},{"type":19,"tag":241,"props":1258,"children":1259},{"class":243,"line":1021},[1260,1265,1269,1274],{"type":19,"tag":241,"props":1261,"children":1262},{"style":928},[1263],{"type":24,"value":1264},"  font-weight",{"type":19,"tag":241,"props":1266,"children":1267},{"style":796},[1268],{"type":24,"value":936},{"type":19,"tag":241,"props":1270,"children":1271},{"style":939},[1272],{"type":24,"value":1273},"600",{"type":19,"tag":241,"props":1275,"children":1276},{"style":796},[1277],{"type":24,"value":953},{"type":19,"tag":241,"props":1279,"children":1280},{"class":243,"line":1043},[1281,1286,1290,1295,1299],{"type":19,"tag":241,"props":1282,"children":1283},{"style":928},[1284],{"type":24,"value":1285},"  font-size",{"type":19,"tag":241,"props":1287,"children":1288},{"style":796},[1289],{"type":24,"value":936},{"type":19,"tag":241,"props":1291,"children":1292},{"style":939},[1293],{"type":24,"value":1294},"0.875",{"type":19,"tag":241,"props":1296,"children":1297},{"style":945},[1298],{"type":24,"value":1063},{"type":19,"tag":241,"props":1300,"children":1301},{"style":796},[1302],{"type":24,"value":953},{"type":19,"tag":241,"props":1304,"children":1305},{"class":243,"line":1070},[1306,1311,1315,1320,1324],{"type":19,"tag":241,"props":1307,"children":1308},{"style":928},[1309],{"type":24,"value":1310},"  line-height",{"type":19,"tag":241,"props":1312,"children":1313},{"style":796},[1314],{"type":24,"value":936},{"type":19,"tag":241,"props":1316,"children":1317},{"style":939},[1318],{"type":24,"value":1319},"1.25",{"type":19,"tag":241,"props":1321,"children":1322},{"style":945},[1323],{"type":24,"value":1063},{"type":19,"tag":241,"props":1325,"children":1326},{"style":796},[1327],{"type":24,"value":953},{"type":19,"tag":241,"props":1329,"children":1331},{"class":243,"line":1330},10,[1332,1337,1341,1346,1350,1355,1359],{"type":19,"tag":241,"props":1333,"children":1334},{"style":928},[1335],{"type":24,"value":1336},"  padding",{"type":19,"tag":241,"props":1338,"children":1339},{"style":796},[1340],{"type":24,"value":936},{"type":19,"tag":241,"props":1342,"children":1343},{"style":939},[1344],{"type":24,"value":1345},"0.5",{"type":19,"tag":241,"props":1347,"children":1348},{"style":945},[1349],{"type":24,"value":1063},{"type":19,"tag":241,"props":1351,"children":1352},{"style":939},[1353],{"type":24,"value":1354}," 0.75",{"type":19,"tag":241,"props":1356,"children":1357},{"style":945},[1358],{"type":24,"value":1063},{"type":19,"tag":241,"props":1360,"children":1361},{"style":796},[1362],{"type":24,"value":953},{"type":19,"tag":241,"props":1364,"children":1366},{"class":243,"line":1365},11,[1367,1372,1376,1380],{"type":19,"tag":241,"props":1368,"children":1369},{"style":928},[1370],{"type":24,"value":1371},"  text-decoration",{"type":19,"tag":241,"props":1373,"children":1374},{"style":796},[1375],{"type":24,"value":936},{"type":19,"tag":241,"props":1377,"children":1378},{"style":969},[1379],{"type":24,"value":1227},{"type":19,"tag":241,"props":1381,"children":1382},{"style":796},[1383],{"type":24,"value":953},{"type":19,"tag":241,"props":1385,"children":1387},{"class":243,"line":1386},12,[1388,1393,1397,1402],{"type":19,"tag":241,"props":1389,"children":1390},{"style":928},[1391],{"type":24,"value":1392},"  cursor",{"type":19,"tag":241,"props":1394,"children":1395},{"style":796},[1396],{"type":24,"value":936},{"type":19,"tag":241,"props":1398,"children":1399},{"style":969},[1400],{"type":24,"value":1401},"pointer",{"type":19,"tag":241,"props":1403,"children":1404},{"style":796},[1405],{"type":24,"value":953},{"type":19,"tag":241,"props":1407,"children":1409},{"class":243,"line":1408},13,[1410],{"type":19,"tag":241,"props":1411,"children":1412},{"style":796},[1413],{"type":24,"value":1076},{"type":19,"tag":20,"props":1415,"children":1416},{},[1417,1419,1423],{"type":24,"value":1418},"Finally, the most important piece is the wiggle class. We will make use of css animations and will create a new animation\nwith name ",{"type":19,"tag":406,"props":1420,"children":1421},{},[1422],{"type":24,"value":744},{"type":24,"value":1424},", which will last for 1 second and will have an ease-in-out timing. For the defined animation we need\nto attach the keyframes and apply the necessary transforms so that the elements will \"shake\". The desired effect will be\nachieved by setting the rotation to 0 degrees at start (0%) and end (100%) of the animation. The in-between states will\nhave either 10 degree (17%, 50%, 84%) or -10 degree (35%, 67%) rotation.",{"type":19,"tag":231,"props":1426,"children":1428},{"className":879,"code":1427,"language":881,"meta":7,"style":7},"/* wiggle-css.component.scss */\n.wiggle {\n    animation: wiggle;\n    animation-duration: 1s;\n    animation-timing-function: ease-in-out;\n}\n\n@keyframes wiggle {\n    0%, 100% {\n        transform: rotate(0deg);\n    }\n    17%, 50%, 84% {\n        transform: rotate(10deg);\n    }\n    35%, 67% {\n        transform: rotate(-10deg);\n    }\n}\n",[1429],{"type":19,"tag":193,"props":1430,"children":1431},{"__ignoreMap":7},[1432,1447,1462,1475,1500,1521,1528,1536,1561,1569,1604,1612,1620,1652,1660,1669,1702,1710],{"type":19,"tag":241,"props":1433,"children":1434},{"class":243,"line":14},[1435,1439,1443],{"type":19,"tag":241,"props":1436,"children":1437},{"style":572},[1438],{"type":24,"value":893},{"type":19,"tag":241,"props":1440,"children":1441},{"style":578},[1442],{"type":24,"value":898},{"type":19,"tag":241,"props":1444,"children":1445},{"style":572},[1446],{"type":24,"value":903},{"type":19,"tag":241,"props":1448,"children":1449},{"class":243,"line":27},[1450,1454,1458],{"type":19,"tag":241,"props":1451,"children":1452},{"style":909},[1453],{"type":24,"value":96},{"type":19,"tag":241,"props":1455,"children":1456},{"style":827},[1457],{"type":24,"value":744},{"type":19,"tag":241,"props":1459,"children":1460},{"style":796},[1461],{"type":24,"value":922},{"type":19,"tag":241,"props":1463,"children":1464},{"class":243,"line":331},[1465,1470],{"type":19,"tag":241,"props":1466,"children":1467},{"style":928},[1468],{"type":24,"value":1469},"    animation",{"type":19,"tag":241,"props":1471,"children":1472},{"style":796},[1473],{"type":24,"value":1474},": wiggle;\n",{"type":19,"tag":241,"props":1476,"children":1477},{"class":243,"line":956},[1478,1483,1487,1491,1496],{"type":19,"tag":241,"props":1479,"children":1480},{"style":928},[1481],{"type":24,"value":1482},"    animation-duration",{"type":19,"tag":241,"props":1484,"children":1485},{"style":796},[1486],{"type":24,"value":936},{"type":19,"tag":241,"props":1488,"children":1489},{"style":939},[1490],{"type":24,"value":1058},{"type":19,"tag":241,"props":1492,"children":1493},{"style":945},[1494],{"type":24,"value":1495},"s",{"type":19,"tag":241,"props":1497,"children":1498},{"style":796},[1499],{"type":24,"value":953},{"type":19,"tag":241,"props":1501,"children":1502},{"class":243,"line":11},[1503,1508,1512,1517],{"type":19,"tag":241,"props":1504,"children":1505},{"style":928},[1506],{"type":24,"value":1507},"    animation-timing-function",{"type":19,"tag":241,"props":1509,"children":1510},{"style":796},[1511],{"type":24,"value":936},{"type":19,"tag":241,"props":1513,"children":1514},{"style":969},[1515],{"type":24,"value":1516},"ease-in-out",{"type":19,"tag":241,"props":1518,"children":1519},{"style":796},[1520],{"type":24,"value":953},{"type":19,"tag":241,"props":1522,"children":1523},{"class":243,"line":1000},[1524],{"type":19,"tag":241,"props":1525,"children":1526},{"style":796},[1527],{"type":24,"value":1076},{"type":19,"tag":241,"props":1529,"children":1530},{"class":243,"line":1021},[1531],{"type":19,"tag":241,"props":1532,"children":1533},{"emptyLinePlaceholder":41},[1534],{"type":24,"value":1535},"\n",{"type":19,"tag":241,"props":1537,"children":1538},{"class":243,"line":1043},[1539,1545,1551,1557],{"type":19,"tag":241,"props":1540,"children":1542},{"style":1541},"--shiki-default:#C792EA",[1543],{"type":24,"value":1544},"@",{"type":19,"tag":241,"props":1546,"children":1548},{"style":1547},"--shiki-default:#C792EA;--shiki-default-font-style:italic",[1549],{"type":24,"value":1550},"keyframes",{"type":19,"tag":241,"props":1552,"children":1554},{"style":1553},"--shiki-default:#D7DBE0",[1555],{"type":24,"value":1556}," wiggle",{"type":19,"tag":241,"props":1558,"children":1559},{"style":796},[1560],{"type":24,"value":922},{"type":19,"tag":241,"props":1562,"children":1563},{"class":243,"line":1070},[1564],{"type":19,"tag":241,"props":1565,"children":1566},{"style":796},[1567],{"type":24,"value":1568},"    0%, 100% {\n",{"type":19,"tag":241,"props":1570,"children":1571},{"class":243,"line":1330},[1572,1577,1581,1586,1590,1595,1600],{"type":19,"tag":241,"props":1573,"children":1574},{"style":928},[1575],{"type":24,"value":1576},"        transform",{"type":19,"tag":241,"props":1578,"children":1579},{"style":796},[1580],{"type":24,"value":936},{"type":19,"tag":241,"props":1582,"children":1583},{"style":909},[1584],{"type":24,"value":1585},"rotate",{"type":19,"tag":241,"props":1587,"children":1588},{"style":796},[1589],{"type":24,"value":1145},{"type":19,"tag":241,"props":1591,"children":1592},{"style":939},[1593],{"type":24,"value":1594},"0",{"type":19,"tag":241,"props":1596,"children":1597},{"style":945},[1598],{"type":24,"value":1599},"deg",{"type":19,"tag":241,"props":1601,"children":1602},{"style":796},[1603],{"type":24,"value":1171},{"type":19,"tag":241,"props":1605,"children":1606},{"class":243,"line":1365},[1607],{"type":19,"tag":241,"props":1608,"children":1609},{"style":796},[1610],{"type":24,"value":1611},"    }\n",{"type":19,"tag":241,"props":1613,"children":1614},{"class":243,"line":1386},[1615],{"type":19,"tag":241,"props":1616,"children":1617},{"style":796},[1618],{"type":24,"value":1619},"    17%, 50%, 84% {\n",{"type":19,"tag":241,"props":1621,"children":1622},{"class":243,"line":1408},[1623,1627,1631,1635,1639,1644,1648],{"type":19,"tag":241,"props":1624,"children":1625},{"style":928},[1626],{"type":24,"value":1576},{"type":19,"tag":241,"props":1628,"children":1629},{"style":796},[1630],{"type":24,"value":936},{"type":19,"tag":241,"props":1632,"children":1633},{"style":909},[1634],{"type":24,"value":1585},{"type":19,"tag":241,"props":1636,"children":1637},{"style":796},[1638],{"type":24,"value":1145},{"type":19,"tag":241,"props":1640,"children":1641},{"style":939},[1642],{"type":24,"value":1643},"10",{"type":19,"tag":241,"props":1645,"children":1646},{"style":945},[1647],{"type":24,"value":1599},{"type":19,"tag":241,"props":1649,"children":1650},{"style":796},[1651],{"type":24,"value":1171},{"type":19,"tag":241,"props":1653,"children":1655},{"class":243,"line":1654},14,[1656],{"type":19,"tag":241,"props":1657,"children":1658},{"style":796},[1659],{"type":24,"value":1611},{"type":19,"tag":241,"props":1661,"children":1663},{"class":243,"line":1662},15,[1664],{"type":19,"tag":241,"props":1665,"children":1666},{"style":796},[1667],{"type":24,"value":1668},"    35%, 67% {\n",{"type":19,"tag":241,"props":1670,"children":1672},{"class":243,"line":1671},16,[1673,1677,1681,1685,1689,1694,1698],{"type":19,"tag":241,"props":1674,"children":1675},{"style":928},[1676],{"type":24,"value":1576},{"type":19,"tag":241,"props":1678,"children":1679},{"style":796},[1680],{"type":24,"value":936},{"type":19,"tag":241,"props":1682,"children":1683},{"style":909},[1684],{"type":24,"value":1585},{"type":19,"tag":241,"props":1686,"children":1687},{"style":796},[1688],{"type":24,"value":1145},{"type":19,"tag":241,"props":1690,"children":1691},{"style":939},[1692],{"type":24,"value":1693},"-10",{"type":19,"tag":241,"props":1695,"children":1696},{"style":945},[1697],{"type":24,"value":1599},{"type":19,"tag":241,"props":1699,"children":1700},{"style":796},[1701],{"type":24,"value":1171},{"type":19,"tag":241,"props":1703,"children":1705},{"class":243,"line":1704},17,[1706],{"type":19,"tag":241,"props":1707,"children":1708},{"style":796},[1709],{"type":24,"value":1611},{"type":19,"tag":241,"props":1711,"children":1713},{"class":243,"line":1712},18,[1714],{"type":19,"tag":241,"props":1715,"children":1716},{"style":796},[1717],{"type":24,"value":1076},{"type":19,"tag":20,"props":1719,"children":1720},{},[1721],{"type":24,"value":1722},"This is it, a simple wiggle animation on our button using just an animation class with some keyframes attached to it.",{"type":19,"tag":20,"props":1724,"children":1725},{},[1726,1728,1733],{"type":24,"value":1727},"The simple solution above is fine, but it can be improved. First of all, it runs only once and second, it runs immediately.\nWhat we want to achieve is to have the animation run multiple times and have a pause between each run. For that we can\nuse another animation property and that is ",{"type":19,"tag":406,"props":1729,"children":1730},{},[1731],{"type":24,"value":1732},"animation-iteration-count",{"type":24,"value":1734}," alongside with updated duration to 4 seconds and\nmodified keyframe timestamps. So, we will set the iteration count to infinite and make all the rotations between the 80%\nkeyframe and 100% keyframe. The updated css should look like this:",{"type":19,"tag":231,"props":1736,"children":1738},{"className":879,"code":1737,"language":881,"meta":7,"style":7},"/* wiggle-css.component.scss */\n.wiggle {\n    animation: wiggle;\n    animation-duration: 4s;\n    animation-iteration-count: infinite;\n    animation-timing-function: ease-in-out;\n}\n\n@keyframes wiggle {\n  80%, 100% {\n    transform: rotate(0deg);\n  }\n  83%, 89%, 97% {\n    transform: rotate(10deg);\n  }\n  86%, 93% {\n    transform: rotate(-10deg);\n  }\n}\n",[1739],{"type":19,"tag":193,"props":1740,"children":1741},{"__ignoreMap":7},[1742,1757,1772,1783,1807,1828,1847,1854,1861,1880,1888,1920,1928,1936,1967,1974,1982,2013,2020],{"type":19,"tag":241,"props":1743,"children":1744},{"class":243,"line":14},[1745,1749,1753],{"type":19,"tag":241,"props":1746,"children":1747},{"style":572},[1748],{"type":24,"value":893},{"type":19,"tag":241,"props":1750,"children":1751},{"style":578},[1752],{"type":24,"value":898},{"type":19,"tag":241,"props":1754,"children":1755},{"style":572},[1756],{"type":24,"value":903},{"type":19,"tag":241,"props":1758,"children":1759},{"class":243,"line":27},[1760,1764,1768],{"type":19,"tag":241,"props":1761,"children":1762},{"style":909},[1763],{"type":24,"value":96},{"type":19,"tag":241,"props":1765,"children":1766},{"style":827},[1767],{"type":24,"value":744},{"type":19,"tag":241,"props":1769,"children":1770},{"style":796},[1771],{"type":24,"value":922},{"type":19,"tag":241,"props":1773,"children":1774},{"class":243,"line":331},[1775,1779],{"type":19,"tag":241,"props":1776,"children":1777},{"style":928},[1778],{"type":24,"value":1469},{"type":19,"tag":241,"props":1780,"children":1781},{"style":796},[1782],{"type":24,"value":1474},{"type":19,"tag":241,"props":1784,"children":1785},{"class":243,"line":956},[1786,1790,1794,1799,1803],{"type":19,"tag":241,"props":1787,"children":1788},{"style":928},[1789],{"type":24,"value":1482},{"type":19,"tag":241,"props":1791,"children":1792},{"style":796},[1793],{"type":24,"value":936},{"type":19,"tag":241,"props":1795,"children":1796},{"style":939},[1797],{"type":24,"value":1798},"4",{"type":19,"tag":241,"props":1800,"children":1801},{"style":945},[1802],{"type":24,"value":1495},{"type":19,"tag":241,"props":1804,"children":1805},{"style":796},[1806],{"type":24,"value":953},{"type":19,"tag":241,"props":1808,"children":1809},{"class":243,"line":11},[1810,1815,1819,1824],{"type":19,"tag":241,"props":1811,"children":1812},{"style":928},[1813],{"type":24,"value":1814},"    animation-iteration-count",{"type":19,"tag":241,"props":1816,"children":1817},{"style":796},[1818],{"type":24,"value":936},{"type":19,"tag":241,"props":1820,"children":1821},{"style":969},[1822],{"type":24,"value":1823},"infinite",{"type":19,"tag":241,"props":1825,"children":1826},{"style":796},[1827],{"type":24,"value":953},{"type":19,"tag":241,"props":1829,"children":1830},{"class":243,"line":1000},[1831,1835,1839,1843],{"type":19,"tag":241,"props":1832,"children":1833},{"style":928},[1834],{"type":24,"value":1507},{"type":19,"tag":241,"props":1836,"children":1837},{"style":796},[1838],{"type":24,"value":936},{"type":19,"tag":241,"props":1840,"children":1841},{"style":969},[1842],{"type":24,"value":1516},{"type":19,"tag":241,"props":1844,"children":1845},{"style":796},[1846],{"type":24,"value":953},{"type":19,"tag":241,"props":1848,"children":1849},{"class":243,"line":1021},[1850],{"type":19,"tag":241,"props":1851,"children":1852},{"style":796},[1853],{"type":24,"value":1076},{"type":19,"tag":241,"props":1855,"children":1856},{"class":243,"line":1043},[1857],{"type":19,"tag":241,"props":1858,"children":1859},{"emptyLinePlaceholder":41},[1860],{"type":24,"value":1535},{"type":19,"tag":241,"props":1862,"children":1863},{"class":243,"line":1070},[1864,1868,1872,1876],{"type":19,"tag":241,"props":1865,"children":1866},{"style":1541},[1867],{"type":24,"value":1544},{"type":19,"tag":241,"props":1869,"children":1870},{"style":1547},[1871],{"type":24,"value":1550},{"type":19,"tag":241,"props":1873,"children":1874},{"style":1553},[1875],{"type":24,"value":1556},{"type":19,"tag":241,"props":1877,"children":1878},{"style":796},[1879],{"type":24,"value":922},{"type":19,"tag":241,"props":1881,"children":1882},{"class":243,"line":1330},[1883],{"type":19,"tag":241,"props":1884,"children":1885},{"style":796},[1886],{"type":24,"value":1887},"  80%, 100% {\n",{"type":19,"tag":241,"props":1889,"children":1890},{"class":243,"line":1365},[1891,1896,1900,1904,1908,1912,1916],{"type":19,"tag":241,"props":1892,"children":1893},{"style":928},[1894],{"type":24,"value":1895},"    transform",{"type":19,"tag":241,"props":1897,"children":1898},{"style":796},[1899],{"type":24,"value":936},{"type":19,"tag":241,"props":1901,"children":1902},{"style":909},[1903],{"type":24,"value":1585},{"type":19,"tag":241,"props":1905,"children":1906},{"style":796},[1907],{"type":24,"value":1145},{"type":19,"tag":241,"props":1909,"children":1910},{"style":939},[1911],{"type":24,"value":1594},{"type":19,"tag":241,"props":1913,"children":1914},{"style":945},[1915],{"type":24,"value":1599},{"type":19,"tag":241,"props":1917,"children":1918},{"style":796},[1919],{"type":24,"value":1171},{"type":19,"tag":241,"props":1921,"children":1922},{"class":243,"line":1386},[1923],{"type":19,"tag":241,"props":1924,"children":1925},{"style":796},[1926],{"type":24,"value":1927},"  }\n",{"type":19,"tag":241,"props":1929,"children":1930},{"class":243,"line":1408},[1931],{"type":19,"tag":241,"props":1932,"children":1933},{"style":796},[1934],{"type":24,"value":1935},"  83%, 89%, 97% {\n",{"type":19,"tag":241,"props":1937,"children":1938},{"class":243,"line":1654},[1939,1943,1947,1951,1955,1959,1963],{"type":19,"tag":241,"props":1940,"children":1941},{"style":928},[1942],{"type":24,"value":1895},{"type":19,"tag":241,"props":1944,"children":1945},{"style":796},[1946],{"type":24,"value":936},{"type":19,"tag":241,"props":1948,"children":1949},{"style":909},[1950],{"type":24,"value":1585},{"type":19,"tag":241,"props":1952,"children":1953},{"style":796},[1954],{"type":24,"value":1145},{"type":19,"tag":241,"props":1956,"children":1957},{"style":939},[1958],{"type":24,"value":1643},{"type":19,"tag":241,"props":1960,"children":1961},{"style":945},[1962],{"type":24,"value":1599},{"type":19,"tag":241,"props":1964,"children":1965},{"style":796},[1966],{"type":24,"value":1171},{"type":19,"tag":241,"props":1968,"children":1969},{"class":243,"line":1662},[1970],{"type":19,"tag":241,"props":1971,"children":1972},{"style":796},[1973],{"type":24,"value":1927},{"type":19,"tag":241,"props":1975,"children":1976},{"class":243,"line":1671},[1977],{"type":19,"tag":241,"props":1978,"children":1979},{"style":796},[1980],{"type":24,"value":1981},"  86%, 93% {\n",{"type":19,"tag":241,"props":1983,"children":1984},{"class":243,"line":1704},[1985,1989,1993,1997,2001,2005,2009],{"type":19,"tag":241,"props":1986,"children":1987},{"style":928},[1988],{"type":24,"value":1895},{"type":19,"tag":241,"props":1990,"children":1991},{"style":796},[1992],{"type":24,"value":936},{"type":19,"tag":241,"props":1994,"children":1995},{"style":909},[1996],{"type":24,"value":1585},{"type":19,"tag":241,"props":1998,"children":1999},{"style":796},[2000],{"type":24,"value":1145},{"type":19,"tag":241,"props":2002,"children":2003},{"style":939},[2004],{"type":24,"value":1693},{"type":19,"tag":241,"props":2006,"children":2007},{"style":945},[2008],{"type":24,"value":1599},{"type":19,"tag":241,"props":2010,"children":2011},{"style":796},[2012],{"type":24,"value":1171},{"type":19,"tag":241,"props":2014,"children":2015},{"class":243,"line":1712},[2016],{"type":19,"tag":241,"props":2017,"children":2018},{"style":796},[2019],{"type":24,"value":1927},{"type":19,"tag":241,"props":2021,"children":2023},{"class":243,"line":2022},19,[2024],{"type":19,"tag":241,"props":2025,"children":2026},{"style":796},[2027],{"type":24,"value":1076},{"type":19,"tag":70,"props":2029,"children":2031},{"id":2030},"triggering-the-animation-on-event",[2032],{"type":24,"value":2033},"Triggering the animation on event",{"type":19,"tag":20,"props":2035,"children":2036},{},[2037],{"type":24,"value":2038},"Moving on, you probably would like to have that animation only on some custom event triggered by the user, for example\nyou want to animate some inputs after the user clicks a submit button and those fields fail the validation.",{"type":19,"tag":20,"props":2040,"children":2041},{},[2042,2044,2050,2052,2058,2060,2066],{"type":24,"value":2043},"For the demo purpose, let's create a new component using ",{"type":19,"tag":193,"props":2045,"children":2047},{"className":2046},[],[2048],{"type":24,"value":2049},"ng g c wiggle-css-click",{"type":24,"value":2051}," command. In the new component we will keep\nthe structure of the html file, but we need to handle the custom (click in our case) event and trigger the animation. So we\nwill attach the ",{"type":19,"tag":193,"props":2053,"children":2055},{"className":2054},[],[2056],{"type":24,"value":2057},"onWiggleClick()",{"type":24,"value":2059}," method and will create a template reference for the element to be animated ",{"type":19,"tag":193,"props":2061,"children":2063},{"className":2062},[],[2064],{"type":24,"value":2065},"#wiggleButton",{"type":24,"value":96},{"type":19,"tag":231,"props":2068,"children":2070},{"className":749,"code":2069,"language":751,"meta":7,"style":7},"\u003C!-- wiggle-css-click.component.html -->\n\u003Cdiv>On Click\u003C/div>\n\u003Cbutton \n    class=\"button\"\n    (click)=\"onWiggleClick()\"\n    #wiggleButton\n>\n    Click me!\n\u003C/button>\n",[2071],{"type":19,"tag":193,"props":2072,"children":2073},{"__ignoreMap":7},[2074,2090,2122,2138,2163,2187,2195,2202,2210],{"type":19,"tag":241,"props":2075,"children":2076},{"class":243,"line":14},[2077,2081,2086],{"type":19,"tag":241,"props":2078,"children":2079},{"style":572},[2080],{"type":24,"value":763},{"type":19,"tag":241,"props":2082,"children":2083},{"style":578},[2084],{"type":24,"value":2085}," wiggle-css-click.component.html ",{"type":19,"tag":241,"props":2087,"children":2088},{"style":572},[2089],{"type":24,"value":773},{"type":19,"tag":241,"props":2091,"children":2092},{"class":243,"line":27},[2093,2097,2101,2105,2110,2114,2118],{"type":19,"tag":241,"props":2094,"children":2095},{"style":779},[2096],{"type":24,"value":782},{"type":19,"tag":241,"props":2098,"children":2099},{"style":785},[2100],{"type":24,"value":788},{"type":19,"tag":241,"props":2102,"children":2103},{"style":779},[2104],{"type":24,"value":793},{"type":19,"tag":241,"props":2106,"children":2107},{"style":796},[2108],{"type":24,"value":2109},"On Click",{"type":19,"tag":241,"props":2111,"children":2112},{"style":779},[2113],{"type":24,"value":804},{"type":19,"tag":241,"props":2115,"children":2116},{"style":785},[2117],{"type":24,"value":788},{"type":19,"tag":241,"props":2119,"children":2120},{"style":779},[2121],{"type":24,"value":813},{"type":19,"tag":241,"props":2123,"children":2124},{"class":243,"line":331},[2125,2129,2133],{"type":19,"tag":241,"props":2126,"children":2127},{"style":779},[2128],{"type":24,"value":782},{"type":19,"tag":241,"props":2130,"children":2131},{"style":785},[2132],{"type":24,"value":737},{"type":19,"tag":241,"props":2134,"children":2135},{"style":779},[2136],{"type":24,"value":2137}," \n",{"type":19,"tag":241,"props":2139,"children":2140},{"class":243,"line":956},[2141,2146,2150,2154,2158],{"type":19,"tag":241,"props":2142,"children":2143},{"style":827},[2144],{"type":24,"value":2145},"    class",{"type":19,"tag":241,"props":2147,"children":2148},{"style":779},[2149],{"type":24,"value":835},{"type":19,"tag":241,"props":2151,"children":2152},{"style":838},[2153],{"type":24,"value":841},{"type":19,"tag":241,"props":2155,"children":2156},{"style":253},[2157],{"type":24,"value":737},{"type":19,"tag":241,"props":2159,"children":2160},{"style":838},[2161],{"type":24,"value":2162},"\"\n",{"type":19,"tag":241,"props":2164,"children":2165},{"class":243,"line":11},[2166,2171,2175,2179,2183],{"type":19,"tag":241,"props":2167,"children":2168},{"style":827},[2169],{"type":24,"value":2170},"    (click)",{"type":19,"tag":241,"props":2172,"children":2173},{"style":779},[2174],{"type":24,"value":835},{"type":19,"tag":241,"props":2176,"children":2177},{"style":838},[2178],{"type":24,"value":841},{"type":19,"tag":241,"props":2180,"children":2181},{"style":253},[2182],{"type":24,"value":2057},{"type":19,"tag":241,"props":2184,"children":2185},{"style":838},[2186],{"type":24,"value":2162},{"type":19,"tag":241,"props":2188,"children":2189},{"class":243,"line":1000},[2190],{"type":19,"tag":241,"props":2191,"children":2192},{"style":827},[2193],{"type":24,"value":2194},"    #wiggleButton\n",{"type":19,"tag":241,"props":2196,"children":2197},{"class":243,"line":1021},[2198],{"type":19,"tag":241,"props":2199,"children":2200},{"style":779},[2201],{"type":24,"value":813},{"type":19,"tag":241,"props":2203,"children":2204},{"class":243,"line":1043},[2205],{"type":19,"tag":241,"props":2206,"children":2207},{"style":796},[2208],{"type":24,"value":2209},"    Click me!\n",{"type":19,"tag":241,"props":2211,"children":2212},{"class":243,"line":1070},[2213,2217,2221],{"type":19,"tag":241,"props":2214,"children":2215},{"style":779},[2216],{"type":24,"value":804},{"type":19,"tag":241,"props":2218,"children":2219},{"style":785},[2220],{"type":24,"value":737},{"type":19,"tag":241,"props":2222,"children":2223},{"style":779},[2224],{"type":24,"value":813},{"type":19,"tag":20,"props":2226,"children":2227},{},[2228,2230,2236],{"type":24,"value":2229},"The css file will have the same structure as the initial option (with 1 second duration and running only once). In the typescript\ncomponent file we need to implement the logic for click handler method. What we need to do in order to trigger the animation\neach time is to remove it's class from the element and add it back. However, since this happens too fast, we need to adjust it\nwith a little trick, which is not the best one since you rely on a side effect. That side effect is to call the offset width on\nthe element itself between removing and adding the animation class. In order to reference the element we will use the ",{"type":19,"tag":193,"props":2231,"children":2233},{"className":2232},[],[2234],{"type":24,"value":2235},"ViewChild",{"type":24,"value":2237},"\ndecorator and manage the classes on its' native element property. The method will look like this:",{"type":19,"tag":231,"props":2239,"children":2243},{"className":2240,"code":2241,"language":2242,"meta":7,"style":7},"language-ts shiki shiki-themes night-owl","// wiggle-css-click.component.ts\nexport class WiggleCssClickComponent {\n  @ViewChild(\"wiggleButton\") wiggleButton! : ElementRef\u003CHTMLButtonElement>;\n\n  onWiggleClick() {\n    this.wiggleButton.nativeElement.classList.remove(\"wiggle\");\n    this.wiggleButton.nativeElement.offsetWidth;\n    this.wiggleButton.nativeElement.classList.add(\"wiggle\");\n  }\n}\n","ts",[2244],{"type":19,"tag":193,"props":2245,"children":2246},{"__ignoreMap":7},[2247,2260,2282,2345,2352,2369,2433,2470,2530,2537],{"type":19,"tag":241,"props":2248,"children":2249},{"class":243,"line":14},[2250,2255],{"type":19,"tag":241,"props":2251,"children":2252},{"style":572},[2253],{"type":24,"value":2254},"//",{"type":19,"tag":241,"props":2256,"children":2257},{"style":578},[2258],{"type":24,"value":2259}," wiggle-css-click.component.ts\n",{"type":19,"tag":241,"props":2261,"children":2262},{"class":243,"line":27},[2263,2268,2272,2278],{"type":19,"tag":241,"props":2264,"children":2265},{"style":1547},[2266],{"type":24,"value":2267},"export",{"type":19,"tag":241,"props":2269,"children":2270},{"style":1541},[2271],{"type":24,"value":830},{"type":19,"tag":241,"props":2273,"children":2275},{"style":2274},"--shiki-default:#FFCB8B",[2276],{"type":24,"value":2277}," WiggleCssClickComponent",{"type":19,"tag":241,"props":2279,"children":2280},{"style":796},[2281],{"type":24,"value":922},{"type":19,"tag":241,"props":2283,"children":2284},{"class":243,"line":331},[2285,2290,2294,2298,2302,2307,2311,2316,2321,2326,2331,2335,2340],{"type":19,"tag":241,"props":2286,"children":2287},{"style":600},[2288],{"type":24,"value":2289},"  @",{"type":19,"tag":241,"props":2291,"children":2292},{"style":247},[2293],{"type":24,"value":2235},{"type":19,"tag":241,"props":2295,"children":2296},{"style":796},[2297],{"type":24,"value":1145},{"type":19,"tag":241,"props":2299,"children":2300},{"style":838},[2301],{"type":24,"value":841},{"type":19,"tag":241,"props":2303,"children":2304},{"style":253},[2305],{"type":24,"value":2306},"wiggleButton",{"type":19,"tag":241,"props":2308,"children":2309},{"style":838},[2310],{"type":24,"value":841},{"type":19,"tag":241,"props":2312,"children":2313},{"style":796},[2314],{"type":24,"value":2315},") wiggleButton",{"type":19,"tag":241,"props":2317,"children":2318},{"style":779},[2319],{"type":24,"value":2320},"!",{"type":19,"tag":241,"props":2322,"children":2323},{"style":779},[2324],{"type":24,"value":2325}," :",{"type":19,"tag":241,"props":2327,"children":2328},{"style":2274},[2329],{"type":24,"value":2330}," ElementRef",{"type":19,"tag":241,"props":2332,"children":2333},{"style":796},[2334],{"type":24,"value":782},{"type":19,"tag":241,"props":2336,"children":2337},{"style":2274},[2338],{"type":24,"value":2339},"HTMLButtonElement",{"type":19,"tag":241,"props":2341,"children":2342},{"style":796},[2343],{"type":24,"value":2344},">;\n",{"type":19,"tag":241,"props":2346,"children":2347},{"class":243,"line":956},[2348],{"type":19,"tag":241,"props":2349,"children":2350},{"emptyLinePlaceholder":41},[2351],{"type":24,"value":1535},{"type":19,"tag":241,"props":2353,"children":2354},{"class":243,"line":11},[2355,2360,2365],{"type":19,"tag":241,"props":2356,"children":2357},{"style":247},[2358],{"type":24,"value":2359},"  onWiggleClick",{"type":19,"tag":241,"props":2361,"children":2362},{"style":838},[2363],{"type":24,"value":2364},"()",{"type":19,"tag":241,"props":2366,"children":2367},{"style":796},[2368],{"type":24,"value":922},{"type":19,"tag":241,"props":2370,"children":2371},{"class":243,"line":1000},[2372,2377,2381,2386,2390,2395,2399,2404,2408,2413,2417,2421,2425,2429],{"type":19,"tag":241,"props":2373,"children":2374},{"style":779},[2375],{"type":24,"value":2376},"    this",{"type":19,"tag":241,"props":2378,"children":2379},{"style":1547},[2380],{"type":24,"value":96},{"type":19,"tag":241,"props":2382,"children":2384},{"style":2383},"--shiki-default:#FAF39F;--shiki-default-font-style:italic",[2385],{"type":24,"value":2306},{"type":19,"tag":241,"props":2387,"children":2388},{"style":1547},[2389],{"type":24,"value":96},{"type":19,"tag":241,"props":2391,"children":2392},{"style":2383},[2393],{"type":24,"value":2394},"nativeElement",{"type":19,"tag":241,"props":2396,"children":2397},{"style":1547},[2398],{"type":24,"value":96},{"type":19,"tag":241,"props":2400,"children":2401},{"style":2383},[2402],{"type":24,"value":2403},"classList",{"type":19,"tag":241,"props":2405,"children":2406},{"style":1547},[2407],{"type":24,"value":96},{"type":19,"tag":241,"props":2409,"children":2410},{"style":247},[2411],{"type":24,"value":2412},"remove",{"type":19,"tag":241,"props":2414,"children":2415},{"style":796},[2416],{"type":24,"value":1145},{"type":19,"tag":241,"props":2418,"children":2419},{"style":838},[2420],{"type":24,"value":841},{"type":19,"tag":241,"props":2422,"children":2423},{"style":253},[2424],{"type":24,"value":744},{"type":19,"tag":241,"props":2426,"children":2427},{"style":838},[2428],{"type":24,"value":841},{"type":19,"tag":241,"props":2430,"children":2431},{"style":796},[2432],{"type":24,"value":1171},{"type":19,"tag":241,"props":2434,"children":2435},{"class":243,"line":1021},[2436,2440,2444,2448,2452,2456,2460,2466],{"type":19,"tag":241,"props":2437,"children":2438},{"style":779},[2439],{"type":24,"value":2376},{"type":19,"tag":241,"props":2441,"children":2442},{"style":1547},[2443],{"type":24,"value":96},{"type":19,"tag":241,"props":2445,"children":2446},{"style":2383},[2447],{"type":24,"value":2306},{"type":19,"tag":241,"props":2449,"children":2450},{"style":1547},[2451],{"type":24,"value":96},{"type":19,"tag":241,"props":2453,"children":2454},{"style":2383},[2455],{"type":24,"value":2394},{"type":19,"tag":241,"props":2457,"children":2458},{"style":1547},[2459],{"type":24,"value":96},{"type":19,"tag":241,"props":2461,"children":2463},{"style":2462},"--shiki-default:#BAEBE2",[2464],{"type":24,"value":2465},"offsetWidth",{"type":19,"tag":241,"props":2467,"children":2468},{"style":796},[2469],{"type":24,"value":953},{"type":19,"tag":241,"props":2471,"children":2472},{"class":243,"line":1043},[2473,2477,2481,2485,2489,2493,2497,2501,2505,2510,2514,2518,2522,2526],{"type":19,"tag":241,"props":2474,"children":2475},{"style":779},[2476],{"type":24,"value":2376},{"type":19,"tag":241,"props":2478,"children":2479},{"style":1547},[2480],{"type":24,"value":96},{"type":19,"tag":241,"props":2482,"children":2483},{"style":2383},[2484],{"type":24,"value":2306},{"type":19,"tag":241,"props":2486,"children":2487},{"style":1547},[2488],{"type":24,"value":96},{"type":19,"tag":241,"props":2490,"children":2491},{"style":2383},[2492],{"type":24,"value":2394},{"type":19,"tag":241,"props":2494,"children":2495},{"style":1547},[2496],{"type":24,"value":96},{"type":19,"tag":241,"props":2498,"children":2499},{"style":2383},[2500],{"type":24,"value":2403},{"type":19,"tag":241,"props":2502,"children":2503},{"style":1547},[2504],{"type":24,"value":96},{"type":19,"tag":241,"props":2506,"children":2507},{"style":247},[2508],{"type":24,"value":2509},"add",{"type":19,"tag":241,"props":2511,"children":2512},{"style":796},[2513],{"type":24,"value":1145},{"type":19,"tag":241,"props":2515,"children":2516},{"style":838},[2517],{"type":24,"value":841},{"type":19,"tag":241,"props":2519,"children":2520},{"style":253},[2521],{"type":24,"value":744},{"type":19,"tag":241,"props":2523,"children":2524},{"style":838},[2525],{"type":24,"value":841},{"type":19,"tag":241,"props":2527,"children":2528},{"style":796},[2529],{"type":24,"value":1171},{"type":19,"tag":241,"props":2531,"children":2532},{"class":243,"line":1070},[2533],{"type":19,"tag":241,"props":2534,"children":2535},{"style":796},[2536],{"type":24,"value":1927},{"type":19,"tag":241,"props":2538,"children":2539},{"class":243,"line":1330},[2540],{"type":19,"tag":241,"props":2541,"children":2542},{"style":796},[2543],{"type":24,"value":1076},{"type":19,"tag":70,"props":2545,"children":2547},{"id":2546},"css-and-angular-directives",[2548],{"type":24,"value":2549},"CSS and Angular Directives",{"type":19,"tag":20,"props":2551,"children":2552},{},[2553,2555,2560,2562,2568,2570,2575],{"type":24,"value":2554},"In Angular world, we can use another option to trigger the behaviour of our element. In this case we are limited only to the\nelement itself. We can use a ",{"type":19,"tag":103,"props":2556,"children":2557},{},[2558],{"type":24,"value":2559},"directive",{"type":24,"value":2561}," to attach the animation behaviour on button click. To generate a new directive we\nshould run the ",{"type":19,"tag":193,"props":2563,"children":2565},{"className":2564},[],[2566],{"type":24,"value":2567},"ng g d wiggle",{"type":24,"value":2569}," command. Inside the directive we need to get the element ref and then listen for the click event\nusing the ",{"type":19,"tag":103,"props":2571,"children":2572},{},[2573],{"type":24,"value":2574},"HostListener",{"type":24,"value":2576}," decorator. The method implementation remains the same as in the option above: we remove the animation\nclass, call the offsetWidth and then attach the class back. The directive class should look like this:",{"type":19,"tag":231,"props":2578,"children":2580},{"className":2240,"code":2579,"language":2242,"meta":7,"style":7},"// wiggle.directive.ts\nexport class WiggleDirective {\n  private el = inject(ElementRef);\n\n  @HostListener('click') onClick() {\n    this.el.nativeElement.classList.remove(\"wiggle\");\n    this.el.nativeElement.offsetWidth;\n    this.el.nativeElement.classList.add(\"wiggle\");\n  }\n}\n",[2581],{"type":19,"tag":193,"props":2582,"children":2583},{"__ignoreMap":7},[2584,2596,2616,2643,2650,2697,2757,2792,2851,2858],{"type":19,"tag":241,"props":2585,"children":2586},{"class":243,"line":14},[2587,2591],{"type":19,"tag":241,"props":2588,"children":2589},{"style":572},[2590],{"type":24,"value":2254},{"type":19,"tag":241,"props":2592,"children":2593},{"style":578},[2594],{"type":24,"value":2595}," wiggle.directive.ts\n",{"type":19,"tag":241,"props":2597,"children":2598},{"class":243,"line":27},[2599,2603,2607,2612],{"type":19,"tag":241,"props":2600,"children":2601},{"style":1547},[2602],{"type":24,"value":2267},{"type":19,"tag":241,"props":2604,"children":2605},{"style":1541},[2606],{"type":24,"value":830},{"type":19,"tag":241,"props":2608,"children":2609},{"style":2274},[2610],{"type":24,"value":2611}," WiggleDirective",{"type":19,"tag":241,"props":2613,"children":2614},{"style":796},[2615],{"type":24,"value":922},{"type":19,"tag":241,"props":2617,"children":2618},{"class":243,"line":331},[2619,2624,2629,2633,2638],{"type":19,"tag":241,"props":2620,"children":2621},{"style":1547},[2622],{"type":24,"value":2623},"  private",{"type":19,"tag":241,"props":2625,"children":2626},{"style":796},[2627],{"type":24,"value":2628}," el ",{"type":19,"tag":241,"props":2630,"children":2631},{"style":1541},[2632],{"type":24,"value":835},{"type":19,"tag":241,"props":2634,"children":2635},{"style":247},[2636],{"type":24,"value":2637}," inject",{"type":19,"tag":241,"props":2639,"children":2640},{"style":796},[2641],{"type":24,"value":2642},"(ElementRef);\n",{"type":19,"tag":241,"props":2644,"children":2645},{"class":243,"line":956},[2646],{"type":19,"tag":241,"props":2647,"children":2648},{"emptyLinePlaceholder":41},[2649],{"type":24,"value":1535},{"type":19,"tag":241,"props":2651,"children":2652},{"class":243,"line":11},[2653,2657,2661,2665,2670,2675,2679,2684,2689,2693],{"type":19,"tag":241,"props":2654,"children":2655},{"style":600},[2656],{"type":24,"value":2289},{"type":19,"tag":241,"props":2658,"children":2659},{"style":247},[2660],{"type":24,"value":2574},{"type":19,"tag":241,"props":2662,"children":2663},{"style":796},[2664],{"type":24,"value":1145},{"type":19,"tag":241,"props":2666,"children":2667},{"style":838},[2668],{"type":24,"value":2669},"'",{"type":19,"tag":241,"props":2671,"children":2672},{"style":253},[2673],{"type":24,"value":2674},"click",{"type":19,"tag":241,"props":2676,"children":2677},{"style":838},[2678],{"type":24,"value":2669},{"type":19,"tag":241,"props":2680,"children":2681},{"style":796},[2682],{"type":24,"value":2683},") ",{"type":19,"tag":241,"props":2685,"children":2686},{"style":247},[2687],{"type":24,"value":2688},"onClick",{"type":19,"tag":241,"props":2690,"children":2691},{"style":838},[2692],{"type":24,"value":2364},{"type":19,"tag":241,"props":2694,"children":2695},{"style":796},[2696],{"type":24,"value":922},{"type":19,"tag":241,"props":2698,"children":2699},{"class":243,"line":1000},[2700,2704,2708,2713,2717,2721,2725,2729,2733,2737,2741,2745,2749,2753],{"type":19,"tag":241,"props":2701,"children":2702},{"style":779},[2703],{"type":24,"value":2376},{"type":19,"tag":241,"props":2705,"children":2706},{"style":1547},[2707],{"type":24,"value":96},{"type":19,"tag":241,"props":2709,"children":2710},{"style":2383},[2711],{"type":24,"value":2712},"el",{"type":19,"tag":241,"props":2714,"children":2715},{"style":1547},[2716],{"type":24,"value":96},{"type":19,"tag":241,"props":2718,"children":2719},{"style":2383},[2720],{"type":24,"value":2394},{"type":19,"tag":241,"props":2722,"children":2723},{"style":1547},[2724],{"type":24,"value":96},{"type":19,"tag":241,"props":2726,"children":2727},{"style":2383},[2728],{"type":24,"value":2403},{"type":19,"tag":241,"props":2730,"children":2731},{"style":1547},[2732],{"type":24,"value":96},{"type":19,"tag":241,"props":2734,"children":2735},{"style":247},[2736],{"type":24,"value":2412},{"type":19,"tag":241,"props":2738,"children":2739},{"style":796},[2740],{"type":24,"value":1145},{"type":19,"tag":241,"props":2742,"children":2743},{"style":838},[2744],{"type":24,"value":841},{"type":19,"tag":241,"props":2746,"children":2747},{"style":253},[2748],{"type":24,"value":744},{"type":19,"tag":241,"props":2750,"children":2751},{"style":838},[2752],{"type":24,"value":841},{"type":19,"tag":241,"props":2754,"children":2755},{"style":796},[2756],{"type":24,"value":1171},{"type":19,"tag":241,"props":2758,"children":2759},{"class":243,"line":1021},[2760,2764,2768,2772,2776,2780,2784,2788],{"type":19,"tag":241,"props":2761,"children":2762},{"style":779},[2763],{"type":24,"value":2376},{"type":19,"tag":241,"props":2765,"children":2766},{"style":1547},[2767],{"type":24,"value":96},{"type":19,"tag":241,"props":2769,"children":2770},{"style":2383},[2771],{"type":24,"value":2712},{"type":19,"tag":241,"props":2773,"children":2774},{"style":1547},[2775],{"type":24,"value":96},{"type":19,"tag":241,"props":2777,"children":2778},{"style":2383},[2779],{"type":24,"value":2394},{"type":19,"tag":241,"props":2781,"children":2782},{"style":1547},[2783],{"type":24,"value":96},{"type":19,"tag":241,"props":2785,"children":2786},{"style":2462},[2787],{"type":24,"value":2465},{"type":19,"tag":241,"props":2789,"children":2790},{"style":796},[2791],{"type":24,"value":953},{"type":19,"tag":241,"props":2793,"children":2794},{"class":243,"line":1043},[2795,2799,2803,2807,2811,2815,2819,2823,2827,2831,2835,2839,2843,2847],{"type":19,"tag":241,"props":2796,"children":2797},{"style":779},[2798],{"type":24,"value":2376},{"type":19,"tag":241,"props":2800,"children":2801},{"style":1547},[2802],{"type":24,"value":96},{"type":19,"tag":241,"props":2804,"children":2805},{"style":2383},[2806],{"type":24,"value":2712},{"type":19,"tag":241,"props":2808,"children":2809},{"style":1547},[2810],{"type":24,"value":96},{"type":19,"tag":241,"props":2812,"children":2813},{"style":2383},[2814],{"type":24,"value":2394},{"type":19,"tag":241,"props":2816,"children":2817},{"style":1547},[2818],{"type":24,"value":96},{"type":19,"tag":241,"props":2820,"children":2821},{"style":2383},[2822],{"type":24,"value":2403},{"type":19,"tag":241,"props":2824,"children":2825},{"style":1547},[2826],{"type":24,"value":96},{"type":19,"tag":241,"props":2828,"children":2829},{"style":247},[2830],{"type":24,"value":2509},{"type":19,"tag":241,"props":2832,"children":2833},{"style":796},[2834],{"type":24,"value":1145},{"type":19,"tag":241,"props":2836,"children":2837},{"style":838},[2838],{"type":24,"value":841},{"type":19,"tag":241,"props":2840,"children":2841},{"style":253},[2842],{"type":24,"value":744},{"type":19,"tag":241,"props":2844,"children":2845},{"style":838},[2846],{"type":24,"value":841},{"type":19,"tag":241,"props":2848,"children":2849},{"style":796},[2850],{"type":24,"value":1171},{"type":19,"tag":241,"props":2852,"children":2853},{"class":243,"line":1070},[2854],{"type":19,"tag":241,"props":2855,"children":2856},{"style":796},[2857],{"type":24,"value":1927},{"type":19,"tag":241,"props":2859,"children":2860},{"class":243,"line":1330},[2861],{"type":19,"tag":241,"props":2862,"children":2863},{"style":796},[2864],{"type":24,"value":1076},{"type":19,"tag":20,"props":2866,"children":2867},{},[2868],{"type":24,"value":2869},"And then, in a new component, we have to use the directive on our button:",{"type":19,"tag":231,"props":2871,"children":2873},{"className":749,"code":2872,"language":751,"meta":7,"style":7},"\u003Cdiv>Directive\u003C/div>\n\u003Cbutton class=\"button\" appWiggle>Click me!\u003C/button>\n",[2874],{"type":19,"tag":193,"props":2875,"children":2876},{"__ignoreMap":7},[2877,2909],{"type":19,"tag":241,"props":2878,"children":2879},{"class":243,"line":14},[2880,2884,2888,2892,2897,2901,2905],{"type":19,"tag":241,"props":2881,"children":2882},{"style":779},[2883],{"type":24,"value":782},{"type":19,"tag":241,"props":2885,"children":2886},{"style":785},[2887],{"type":24,"value":788},{"type":19,"tag":241,"props":2889,"children":2890},{"style":779},[2891],{"type":24,"value":793},{"type":19,"tag":241,"props":2893,"children":2894},{"style":796},[2895],{"type":24,"value":2896},"Directive",{"type":19,"tag":241,"props":2898,"children":2899},{"style":779},[2900],{"type":24,"value":804},{"type":19,"tag":241,"props":2902,"children":2903},{"style":785},[2904],{"type":24,"value":788},{"type":19,"tag":241,"props":2906,"children":2907},{"style":779},[2908],{"type":24,"value":813},{"type":19,"tag":241,"props":2910,"children":2911},{"class":243,"line":27},[2912,2916,2920,2924,2928,2932,2936,2940,2945,2949,2954,2958,2962],{"type":19,"tag":241,"props":2913,"children":2914},{"style":779},[2915],{"type":24,"value":782},{"type":19,"tag":241,"props":2917,"children":2918},{"style":785},[2919],{"type":24,"value":737},{"type":19,"tag":241,"props":2921,"children":2922},{"style":827},[2923],{"type":24,"value":830},{"type":19,"tag":241,"props":2925,"children":2926},{"style":779},[2927],{"type":24,"value":835},{"type":19,"tag":241,"props":2929,"children":2930},{"style":838},[2931],{"type":24,"value":841},{"type":19,"tag":241,"props":2933,"children":2934},{"style":253},[2935],{"type":24,"value":737},{"type":19,"tag":241,"props":2937,"children":2938},{"style":838},[2939],{"type":24,"value":841},{"type":19,"tag":241,"props":2941,"children":2942},{"style":827},[2943],{"type":24,"value":2944}," appWiggle",{"type":19,"tag":241,"props":2946,"children":2947},{"style":779},[2948],{"type":24,"value":793},{"type":19,"tag":241,"props":2950,"children":2951},{"style":796},[2952],{"type":24,"value":2953},"Click me!",{"type":19,"tag":241,"props":2955,"children":2956},{"style":779},[2957],{"type":24,"value":804},{"type":19,"tag":241,"props":2959,"children":2960},{"style":785},[2961],{"type":24,"value":737},{"type":19,"tag":241,"props":2963,"children":2964},{"style":779},[2965],{"type":24,"value":813},{"type":19,"tag":70,"props":2967,"children":2969},{"id":2968},"angular-animations-two-states",[2970],{"type":24,"value":2971},"Angular Animations - Two states",{"type":19,"tag":20,"props":2973,"children":2974},{},[2975,2977,2983,2985,2990],{"type":24,"value":2976},"One great thing about angular is that it has its own animation package. We need to enable the animations first. In Angular 17\nstandalone mode we need to update the ",{"type":19,"tag":193,"props":2978,"children":2980},{"className":2979},[],[2981],{"type":24,"value":2982},"app.config.ts",{"type":24,"value":2984}," file and add ",{"type":19,"tag":103,"props":2986,"children":2987},{},[2988],{"type":24,"value":2989},"provideAnimations()",{"type":24,"value":2991}," (also import it at the top)\nto the providers array.",{"type":19,"tag":231,"props":2993,"children":2995},{"className":2240,"code":2994,"language":2242,"meta":7,"style":7},"import { provideAnimations } from '@angular/platform-browser/animations';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [provideAnimations()],\n};\n\n",[2996],{"type":19,"tag":193,"props":2997,"children":2998},{"__ignoreMap":7},[2999,3035,3042,3079,3111],{"type":19,"tag":241,"props":3000,"children":3001},{"class":243,"line":14},[3002,3007,3012,3017,3022,3027,3031],{"type":19,"tag":241,"props":3003,"children":3004},{"style":1547},[3005],{"type":24,"value":3006},"import",{"type":19,"tag":241,"props":3008,"children":3009},{"style":796},[3010],{"type":24,"value":3011}," { provideAnimations } ",{"type":19,"tag":241,"props":3013,"children":3014},{"style":1547},[3015],{"type":24,"value":3016},"from",{"type":19,"tag":241,"props":3018,"children":3019},{"style":838},[3020],{"type":24,"value":3021}," '",{"type":19,"tag":241,"props":3023,"children":3024},{"style":253},[3025],{"type":24,"value":3026},"@angular/platform-browser/animations",{"type":19,"tag":241,"props":3028,"children":3029},{"style":838},[3030],{"type":24,"value":2669},{"type":19,"tag":241,"props":3032,"children":3033},{"style":796},[3034],{"type":24,"value":953},{"type":19,"tag":241,"props":3036,"children":3037},{"class":243,"line":27},[3038],{"type":19,"tag":241,"props":3039,"children":3040},{"emptyLinePlaceholder":41},[3041],{"type":24,"value":1535},{"type":19,"tag":241,"props":3043,"children":3044},{"class":243,"line":331},[3045,3050,3055,3060,3064,3070,3075],{"type":19,"tag":241,"props":3046,"children":3047},{"style":1547},[3048],{"type":24,"value":3049},"export ",{"type":19,"tag":241,"props":3051,"children":3052},{"style":1541},[3053],{"type":24,"value":3054},"const",{"type":19,"tag":241,"props":3056,"children":3057},{"style":247},[3058],{"type":24,"value":3059}," appConfig",{"type":19,"tag":241,"props":3061,"children":3062},{"style":779},[3063],{"type":24,"value":912},{"type":19,"tag":241,"props":3065,"children":3067},{"style":3066},"--shiki-default:#FFCB8B;--shiki-default-font-style:italic",[3068],{"type":24,"value":3069}," ApplicationConfig",{"type":19,"tag":241,"props":3071,"children":3072},{"style":1541},[3073],{"type":24,"value":3074}," =",{"type":19,"tag":241,"props":3076,"children":3077},{"style":1541},[3078],{"type":24,"value":922},{"type":19,"tag":241,"props":3080,"children":3081},{"class":243,"line":956},[3082,3087,3091,3096,3101,3106],{"type":19,"tag":241,"props":3083,"children":3084},{"style":1547},[3085],{"type":24,"value":3086},"  providers",{"type":19,"tag":241,"props":3088,"children":3089},{"style":1541},[3090],{"type":24,"value":912},{"type":19,"tag":241,"props":3092,"children":3093},{"style":796},[3094],{"type":24,"value":3095}," [",{"type":19,"tag":241,"props":3097,"children":3098},{"style":247},[3099],{"type":24,"value":3100},"provideAnimations",{"type":19,"tag":241,"props":3102,"children":3103},{"style":796},[3104],{"type":24,"value":3105},"()]",{"type":19,"tag":241,"props":3107,"children":3108},{"style":1541},[3109],{"type":24,"value":3110},",\n",{"type":19,"tag":241,"props":3112,"children":3113},{"class":243,"line":11},[3114,3119],{"type":19,"tag":241,"props":3115,"children":3116},{"style":1541},[3117],{"type":24,"value":3118},"}",{"type":19,"tag":241,"props":3120,"children":3121},{"style":796},[3122],{"type":24,"value":953},{"type":19,"tag":20,"props":3124,"children":3125},{},[3126,3128,3133],{"type":24,"value":3127},"That is it, now we can move on and configure our animations. We will create a new file and add a new property to the component\ndecorator - ",{"type":19,"tag":103,"props":3129,"children":3130},{},[3131],{"type":24,"value":3132},"animations",{"type":24,"value":96},{"type":19,"tag":231,"props":3135,"children":3137},{"className":2240,"code":3136,"language":2242,"meta":7,"style":7},"@Component({\n    ...,\n    animations: [],\n})\n",[3138],{"type":19,"tag":193,"props":3139,"children":3140},{"__ignoreMap":7},[3141,3158,3170,3178],{"type":19,"tag":241,"props":3142,"children":3143},{"class":243,"line":14},[3144,3148,3153],{"type":19,"tag":241,"props":3145,"children":3146},{"style":600},[3147],{"type":24,"value":1544},{"type":19,"tag":241,"props":3149,"children":3150},{"style":247},[3151],{"type":24,"value":3152},"Component",{"type":19,"tag":241,"props":3154,"children":3155},{"style":796},[3156],{"type":24,"value":3157},"({\n",{"type":19,"tag":241,"props":3159,"children":3160},{"class":243,"line":27},[3161,3166],{"type":19,"tag":241,"props":3162,"children":3163},{"style":779},[3164],{"type":24,"value":3165},"    ...",{"type":19,"tag":241,"props":3167,"children":3168},{"style":796},[3169],{"type":24,"value":3110},{"type":19,"tag":241,"props":3171,"children":3172},{"class":243,"line":331},[3173],{"type":19,"tag":241,"props":3174,"children":3175},{"style":796},[3176],{"type":24,"value":3177},"    animations: [],\n",{"type":19,"tag":241,"props":3179,"children":3180},{"class":243,"line":956},[3181],{"type":19,"tag":241,"props":3182,"children":3183},{"style":796},[3184],{"type":24,"value":3185},"})\n",{"type":19,"tag":20,"props":3187,"children":3188},{},[3189,3191,3196,3198,3202],{"type":24,"value":3190},"Then we need to add a ",{"type":19,"tag":103,"props":3192,"children":3193},{},[3194],{"type":24,"value":3195},"trigger",{"type":24,"value":3197}," that will be attached to an element in the template, we'll call it ",{"type":19,"tag":406,"props":3199,"children":3200},{},[3201],{"type":24,"value":744},{"type":24,"value":96},{"type":19,"tag":231,"props":3204,"children":3206},{"className":2240,"code":3205,"language":2242,"meta":7,"style":7},"@Component({\n    ...,\n    animations: [\n        trigger('wiggle', []),\n    ],\n})\n",[3207],{"type":19,"tag":193,"props":3208,"children":3209},{"__ignoreMap":7},[3210,3225,3236,3244,3273,3281],{"type":19,"tag":241,"props":3211,"children":3212},{"class":243,"line":14},[3213,3217,3221],{"type":19,"tag":241,"props":3214,"children":3215},{"style":600},[3216],{"type":24,"value":1544},{"type":19,"tag":241,"props":3218,"children":3219},{"style":247},[3220],{"type":24,"value":3152},{"type":19,"tag":241,"props":3222,"children":3223},{"style":796},[3224],{"type":24,"value":3157},{"type":19,"tag":241,"props":3226,"children":3227},{"class":243,"line":27},[3228,3232],{"type":19,"tag":241,"props":3229,"children":3230},{"style":779},[3231],{"type":24,"value":3165},{"type":19,"tag":241,"props":3233,"children":3234},{"style":796},[3235],{"type":24,"value":3110},{"type":19,"tag":241,"props":3237,"children":3238},{"class":243,"line":331},[3239],{"type":19,"tag":241,"props":3240,"children":3241},{"style":796},[3242],{"type":24,"value":3243},"    animations: [\n",{"type":19,"tag":241,"props":3245,"children":3246},{"class":243,"line":956},[3247,3252,3256,3260,3264,3268],{"type":19,"tag":241,"props":3248,"children":3249},{"style":247},[3250],{"type":24,"value":3251},"        trigger",{"type":19,"tag":241,"props":3253,"children":3254},{"style":796},[3255],{"type":24,"value":1145},{"type":19,"tag":241,"props":3257,"children":3258},{"style":838},[3259],{"type":24,"value":2669},{"type":19,"tag":241,"props":3261,"children":3262},{"style":253},[3263],{"type":24,"value":744},{"type":19,"tag":241,"props":3265,"children":3266},{"style":838},[3267],{"type":24,"value":2669},{"type":19,"tag":241,"props":3269,"children":3270},{"style":796},[3271],{"type":24,"value":3272},", []),\n",{"type":19,"tag":241,"props":3274,"children":3275},{"class":243,"line":11},[3276],{"type":19,"tag":241,"props":3277,"children":3278},{"style":796},[3279],{"type":24,"value":3280},"    ],\n",{"type":19,"tag":241,"props":3282,"children":3283},{"class":243,"line":1000},[3284],{"type":19,"tag":241,"props":3285,"children":3286},{"style":796},[3287],{"type":24,"value":3185},{"type":19,"tag":20,"props":3289,"children":3290},{},[3291,3293,3298,3300,3305,3307,3312,3314,3319,3321,3326],{"type":24,"value":3292},"The trigger should define a set of ",{"type":19,"tag":103,"props":3294,"children":3295},{},[3296],{"type":24,"value":3297},"states",{"type":24,"value":3299}," and ",{"type":19,"tag":103,"props":3301,"children":3302},{},[3303],{"type":24,"value":3304},"transitions",{"type":24,"value":3306},". Initially we will create two states named ",{"type":19,"tag":406,"props":3308,"children":3309},{},[3310],{"type":24,"value":3311},"start",{"type":24,"value":3313}," and\n",{"type":19,"tag":406,"props":3315,"children":3316},{},[3317],{"type":24,"value":3318},"end",{"type":24,"value":3320},". These states will correspond to the 0% and 100% keyframes from the previous options, respectively. So, each of the states\nwill have a style with ",{"type":19,"tag":103,"props":3322,"children":3323},{},[3324],{"type":24,"value":3325},"rotate: 0deg",{"type":24,"value":96},{"type":19,"tag":231,"props":3328,"children":3330},{"className":2240,"code":3329,"language":2242,"meta":7,"style":7},"// wiggle-ng-animations-1.component.ts\n@Component({\n  ...,\n  animations: [\n    trigger('wiggle', [\n      state(\n        'start',\n        style({\n          rotate: '0deg',\n        })\n      ),\n      state(\n        'end',\n        style({\n          rotate: '0deg',\n        })\n      ),\n    ]),\n  ],\n})\n",[3331],{"type":19,"tag":193,"props":3332,"children":3333},{"__ignoreMap":7},[3334,3346,3361,3373,3381,3410,3423,3443,3455,3480,3488,3496,3507,3526,3537,3560,3567,3574,3582,3590],{"type":19,"tag":241,"props":3335,"children":3336},{"class":243,"line":14},[3337,3341],{"type":19,"tag":241,"props":3338,"children":3339},{"style":572},[3340],{"type":24,"value":2254},{"type":19,"tag":241,"props":3342,"children":3343},{"style":578},[3344],{"type":24,"value":3345}," wiggle-ng-animations-1.component.ts\n",{"type":19,"tag":241,"props":3347,"children":3348},{"class":243,"line":27},[3349,3353,3357],{"type":19,"tag":241,"props":3350,"children":3351},{"style":600},[3352],{"type":24,"value":1544},{"type":19,"tag":241,"props":3354,"children":3355},{"style":247},[3356],{"type":24,"value":3152},{"type":19,"tag":241,"props":3358,"children":3359},{"style":796},[3360],{"type":24,"value":3157},{"type":19,"tag":241,"props":3362,"children":3363},{"class":243,"line":331},[3364,3369],{"type":19,"tag":241,"props":3365,"children":3366},{"style":779},[3367],{"type":24,"value":3368},"  ...",{"type":19,"tag":241,"props":3370,"children":3371},{"style":796},[3372],{"type":24,"value":3110},{"type":19,"tag":241,"props":3374,"children":3375},{"class":243,"line":956},[3376],{"type":19,"tag":241,"props":3377,"children":3378},{"style":796},[3379],{"type":24,"value":3380},"  animations: [\n",{"type":19,"tag":241,"props":3382,"children":3383},{"class":243,"line":11},[3384,3389,3393,3397,3401,3405],{"type":19,"tag":241,"props":3385,"children":3386},{"style":247},[3387],{"type":24,"value":3388},"    trigger",{"type":19,"tag":241,"props":3390,"children":3391},{"style":796},[3392],{"type":24,"value":1145},{"type":19,"tag":241,"props":3394,"children":3395},{"style":838},[3396],{"type":24,"value":2669},{"type":19,"tag":241,"props":3398,"children":3399},{"style":253},[3400],{"type":24,"value":744},{"type":19,"tag":241,"props":3402,"children":3403},{"style":838},[3404],{"type":24,"value":2669},{"type":19,"tag":241,"props":3406,"children":3407},{"style":796},[3408],{"type":24,"value":3409},", [\n",{"type":19,"tag":241,"props":3411,"children":3412},{"class":243,"line":1000},[3413,3418],{"type":19,"tag":241,"props":3414,"children":3415},{"style":247},[3416],{"type":24,"value":3417},"      state",{"type":19,"tag":241,"props":3419,"children":3420},{"style":796},[3421],{"type":24,"value":3422},"(\n",{"type":19,"tag":241,"props":3424,"children":3425},{"class":243,"line":1021},[3426,3431,3435,3439],{"type":19,"tag":241,"props":3427,"children":3428},{"style":838},[3429],{"type":24,"value":3430},"        '",{"type":19,"tag":241,"props":3432,"children":3433},{"style":253},[3434],{"type":24,"value":3311},{"type":19,"tag":241,"props":3436,"children":3437},{"style":838},[3438],{"type":24,"value":2669},{"type":19,"tag":241,"props":3440,"children":3441},{"style":796},[3442],{"type":24,"value":3110},{"type":19,"tag":241,"props":3444,"children":3445},{"class":243,"line":1043},[3446,3451],{"type":19,"tag":241,"props":3447,"children":3448},{"style":247},[3449],{"type":24,"value":3450},"        style",{"type":19,"tag":241,"props":3452,"children":3453},{"style":796},[3454],{"type":24,"value":3157},{"type":19,"tag":241,"props":3456,"children":3457},{"class":243,"line":1070},[3458,3463,3467,3472,3476],{"type":19,"tag":241,"props":3459,"children":3460},{"style":796},[3461],{"type":24,"value":3462},"          rotate: ",{"type":19,"tag":241,"props":3464,"children":3465},{"style":838},[3466],{"type":24,"value":2669},{"type":19,"tag":241,"props":3468,"children":3469},{"style":253},[3470],{"type":24,"value":3471},"0deg",{"type":19,"tag":241,"props":3473,"children":3474},{"style":838},[3475],{"type":24,"value":2669},{"type":19,"tag":241,"props":3477,"children":3478},{"style":796},[3479],{"type":24,"value":3110},{"type":19,"tag":241,"props":3481,"children":3482},{"class":243,"line":1330},[3483],{"type":19,"tag":241,"props":3484,"children":3485},{"style":796},[3486],{"type":24,"value":3487},"        })\n",{"type":19,"tag":241,"props":3489,"children":3490},{"class":243,"line":1365},[3491],{"type":19,"tag":241,"props":3492,"children":3493},{"style":796},[3494],{"type":24,"value":3495},"      ),\n",{"type":19,"tag":241,"props":3497,"children":3498},{"class":243,"line":1386},[3499,3503],{"type":19,"tag":241,"props":3500,"children":3501},{"style":247},[3502],{"type":24,"value":3417},{"type":19,"tag":241,"props":3504,"children":3505},{"style":796},[3506],{"type":24,"value":3422},{"type":19,"tag":241,"props":3508,"children":3509},{"class":243,"line":1408},[3510,3514,3518,3522],{"type":19,"tag":241,"props":3511,"children":3512},{"style":838},[3513],{"type":24,"value":3430},{"type":19,"tag":241,"props":3515,"children":3516},{"style":253},[3517],{"type":24,"value":3318},{"type":19,"tag":241,"props":3519,"children":3520},{"style":838},[3521],{"type":24,"value":2669},{"type":19,"tag":241,"props":3523,"children":3524},{"style":796},[3525],{"type":24,"value":3110},{"type":19,"tag":241,"props":3527,"children":3528},{"class":243,"line":1654},[3529,3533],{"type":19,"tag":241,"props":3530,"children":3531},{"style":247},[3532],{"type":24,"value":3450},{"type":19,"tag":241,"props":3534,"children":3535},{"style":796},[3536],{"type":24,"value":3157},{"type":19,"tag":241,"props":3538,"children":3539},{"class":243,"line":1662},[3540,3544,3548,3552,3556],{"type":19,"tag":241,"props":3541,"children":3542},{"style":796},[3543],{"type":24,"value":3462},{"type":19,"tag":241,"props":3545,"children":3546},{"style":838},[3547],{"type":24,"value":2669},{"type":19,"tag":241,"props":3549,"children":3550},{"style":253},[3551],{"type":24,"value":3471},{"type":19,"tag":241,"props":3553,"children":3554},{"style":838},[3555],{"type":24,"value":2669},{"type":19,"tag":241,"props":3557,"children":3558},{"style":796},[3559],{"type":24,"value":3110},{"type":19,"tag":241,"props":3561,"children":3562},{"class":243,"line":1671},[3563],{"type":19,"tag":241,"props":3564,"children":3565},{"style":796},[3566],{"type":24,"value":3487},{"type":19,"tag":241,"props":3568,"children":3569},{"class":243,"line":1704},[3570],{"type":19,"tag":241,"props":3571,"children":3572},{"style":796},[3573],{"type":24,"value":3495},{"type":19,"tag":241,"props":3575,"children":3576},{"class":243,"line":1712},[3577],{"type":19,"tag":241,"props":3578,"children":3579},{"style":796},[3580],{"type":24,"value":3581},"    ]),\n",{"type":19,"tag":241,"props":3583,"children":3584},{"class":243,"line":2022},[3585],{"type":19,"tag":241,"props":3586,"children":3587},{"style":796},[3588],{"type":24,"value":3589},"  ],\n",{"type":19,"tag":241,"props":3591,"children":3593},{"class":243,"line":3592},20,[3594],{"type":19,"tag":241,"props":3595,"children":3596},{"style":796},[3597],{"type":24,"value":3185},{"type":19,"tag":20,"props":3599,"children":3600},{},[3601,3603,3608],{"type":24,"value":3602},"Now that we have the states, we need to define an animation that will run whenever a state is changed between these two, thus the\nstate change expression will look like this: ",{"type":19,"tag":103,"props":3604,"children":3605},{},[3606],{"type":24,"value":3607},"'start \u003C=> end'",{"type":24,"value":3609}," (notice the \u003C=> symbol). For the transition we also have to\ndeclare the animation, which will run for 1 second in our case and will have an array of three keyframes, which will alternate styles\nbetween -10 degree rotation and 10 degree rotation at offset 0.25, 0.5 and 0.75. These offsets are an equivalent to keyframe percents\nin css and correspond to the point in time from the whole animation duration when the corresponding styles are applied.",{"type":19,"tag":231,"props":3611,"children":3613},{"className":2240,"code":3612,"language":2242,"meta":7,"style":7},"// wiggle-ng-animations-1.component.ts\n@Component({\n  ...,\n  animations: [\n    trigger('wiggle', [\n      // [states],\n      transition(\n        'start \u003C=> end',\n        animate(\n          '1s',\n          keyframes([\n            style({ rotate: '-10deg', offset: 0.25 }),\n            style({ rotate: '10deg', offset: 0.5 }),\n            style({ rotate: '-10deg', offset: 0.75 }),\n          ])\n        )\n      ),\n    ]),\n  ],\n})\n",[3614],{"type":19,"tag":193,"props":3615,"children":3616},{"__ignoreMap":7},[3617,3628,3643,3654,3661,3688,3701,3713,3733,3745,3766,3779,3820,3856,3892,3900,3908,3915,3922,3929],{"type":19,"tag":241,"props":3618,"children":3619},{"class":243,"line":14},[3620,3624],{"type":19,"tag":241,"props":3621,"children":3622},{"style":572},[3623],{"type":24,"value":2254},{"type":19,"tag":241,"props":3625,"children":3626},{"style":578},[3627],{"type":24,"value":3345},{"type":19,"tag":241,"props":3629,"children":3630},{"class":243,"line":27},[3631,3635,3639],{"type":19,"tag":241,"props":3632,"children":3633},{"style":600},[3634],{"type":24,"value":1544},{"type":19,"tag":241,"props":3636,"children":3637},{"style":247},[3638],{"type":24,"value":3152},{"type":19,"tag":241,"props":3640,"children":3641},{"style":796},[3642],{"type":24,"value":3157},{"type":19,"tag":241,"props":3644,"children":3645},{"class":243,"line":331},[3646,3650],{"type":19,"tag":241,"props":3647,"children":3648},{"style":779},[3649],{"type":24,"value":3368},{"type":19,"tag":241,"props":3651,"children":3652},{"style":796},[3653],{"type":24,"value":3110},{"type":19,"tag":241,"props":3655,"children":3656},{"class":243,"line":956},[3657],{"type":19,"tag":241,"props":3658,"children":3659},{"style":796},[3660],{"type":24,"value":3380},{"type":19,"tag":241,"props":3662,"children":3663},{"class":243,"line":11},[3664,3668,3672,3676,3680,3684],{"type":19,"tag":241,"props":3665,"children":3666},{"style":247},[3667],{"type":24,"value":3388},{"type":19,"tag":241,"props":3669,"children":3670},{"style":796},[3671],{"type":24,"value":1145},{"type":19,"tag":241,"props":3673,"children":3674},{"style":838},[3675],{"type":24,"value":2669},{"type":19,"tag":241,"props":3677,"children":3678},{"style":253},[3679],{"type":24,"value":744},{"type":19,"tag":241,"props":3681,"children":3682},{"style":838},[3683],{"type":24,"value":2669},{"type":19,"tag":241,"props":3685,"children":3686},{"style":796},[3687],{"type":24,"value":3409},{"type":19,"tag":241,"props":3689,"children":3690},{"class":243,"line":1000},[3691,3696],{"type":19,"tag":241,"props":3692,"children":3693},{"style":572},[3694],{"type":24,"value":3695},"      //",{"type":19,"tag":241,"props":3697,"children":3698},{"style":578},[3699],{"type":24,"value":3700}," [states],\n",{"type":19,"tag":241,"props":3702,"children":3703},{"class":243,"line":1021},[3704,3709],{"type":19,"tag":241,"props":3705,"children":3706},{"style":247},[3707],{"type":24,"value":3708},"      transition",{"type":19,"tag":241,"props":3710,"children":3711},{"style":796},[3712],{"type":24,"value":3422},{"type":19,"tag":241,"props":3714,"children":3715},{"class":243,"line":1043},[3716,3720,3725,3729],{"type":19,"tag":241,"props":3717,"children":3718},{"style":838},[3719],{"type":24,"value":3430},{"type":19,"tag":241,"props":3721,"children":3722},{"style":253},[3723],{"type":24,"value":3724},"start \u003C=> end",{"type":19,"tag":241,"props":3726,"children":3727},{"style":838},[3728],{"type":24,"value":2669},{"type":19,"tag":241,"props":3730,"children":3731},{"style":796},[3732],{"type":24,"value":3110},{"type":19,"tag":241,"props":3734,"children":3735},{"class":243,"line":1070},[3736,3741],{"type":19,"tag":241,"props":3737,"children":3738},{"style":247},[3739],{"type":24,"value":3740},"        animate",{"type":19,"tag":241,"props":3742,"children":3743},{"style":796},[3744],{"type":24,"value":3422},{"type":19,"tag":241,"props":3746,"children":3747},{"class":243,"line":1330},[3748,3753,3758,3762],{"type":19,"tag":241,"props":3749,"children":3750},{"style":838},[3751],{"type":24,"value":3752},"          '",{"type":19,"tag":241,"props":3754,"children":3755},{"style":253},[3756],{"type":24,"value":3757},"1s",{"type":19,"tag":241,"props":3759,"children":3760},{"style":838},[3761],{"type":24,"value":2669},{"type":19,"tag":241,"props":3763,"children":3764},{"style":796},[3765],{"type":24,"value":3110},{"type":19,"tag":241,"props":3767,"children":3768},{"class":243,"line":1365},[3769,3774],{"type":19,"tag":241,"props":3770,"children":3771},{"style":247},[3772],{"type":24,"value":3773},"          keyframes",{"type":19,"tag":241,"props":3775,"children":3776},{"style":796},[3777],{"type":24,"value":3778},"([\n",{"type":19,"tag":241,"props":3780,"children":3781},{"class":243,"line":1386},[3782,3787,3792,3796,3801,3805,3810,3815],{"type":19,"tag":241,"props":3783,"children":3784},{"style":247},[3785],{"type":24,"value":3786},"            style",{"type":19,"tag":241,"props":3788,"children":3789},{"style":796},[3790],{"type":24,"value":3791},"({ rotate: ",{"type":19,"tag":241,"props":3793,"children":3794},{"style":838},[3795],{"type":24,"value":2669},{"type":19,"tag":241,"props":3797,"children":3798},{"style":253},[3799],{"type":24,"value":3800},"-10deg",{"type":19,"tag":241,"props":3802,"children":3803},{"style":838},[3804],{"type":24,"value":2669},{"type":19,"tag":241,"props":3806,"children":3807},{"style":796},[3808],{"type":24,"value":3809},", offset: ",{"type":19,"tag":241,"props":3811,"children":3812},{"style":939},[3813],{"type":24,"value":3814},"0.25",{"type":19,"tag":241,"props":3816,"children":3817},{"style":796},[3818],{"type":24,"value":3819}," }),\n",{"type":19,"tag":241,"props":3821,"children":3822},{"class":243,"line":1408},[3823,3827,3831,3835,3840,3844,3848,3852],{"type":19,"tag":241,"props":3824,"children":3825},{"style":247},[3826],{"type":24,"value":3786},{"type":19,"tag":241,"props":3828,"children":3829},{"style":796},[3830],{"type":24,"value":3791},{"type":19,"tag":241,"props":3832,"children":3833},{"style":838},[3834],{"type":24,"value":2669},{"type":19,"tag":241,"props":3836,"children":3837},{"style":253},[3838],{"type":24,"value":3839},"10deg",{"type":19,"tag":241,"props":3841,"children":3842},{"style":838},[3843],{"type":24,"value":2669},{"type":19,"tag":241,"props":3845,"children":3846},{"style":796},[3847],{"type":24,"value":3809},{"type":19,"tag":241,"props":3849,"children":3850},{"style":939},[3851],{"type":24,"value":1345},{"type":19,"tag":241,"props":3853,"children":3854},{"style":796},[3855],{"type":24,"value":3819},{"type":19,"tag":241,"props":3857,"children":3858},{"class":243,"line":1654},[3859,3863,3867,3871,3875,3879,3883,3888],{"type":19,"tag":241,"props":3860,"children":3861},{"style":247},[3862],{"type":24,"value":3786},{"type":19,"tag":241,"props":3864,"children":3865},{"style":796},[3866],{"type":24,"value":3791},{"type":19,"tag":241,"props":3868,"children":3869},{"style":838},[3870],{"type":24,"value":2669},{"type":19,"tag":241,"props":3872,"children":3873},{"style":253},[3874],{"type":24,"value":3800},{"type":19,"tag":241,"props":3876,"children":3877},{"style":838},[3878],{"type":24,"value":2669},{"type":19,"tag":241,"props":3880,"children":3881},{"style":796},[3882],{"type":24,"value":3809},{"type":19,"tag":241,"props":3884,"children":3885},{"style":939},[3886],{"type":24,"value":3887},"0.75",{"type":19,"tag":241,"props":3889,"children":3890},{"style":796},[3891],{"type":24,"value":3819},{"type":19,"tag":241,"props":3893,"children":3894},{"class":243,"line":1662},[3895],{"type":19,"tag":241,"props":3896,"children":3897},{"style":796},[3898],{"type":24,"value":3899},"          ])\n",{"type":19,"tag":241,"props":3901,"children":3902},{"class":243,"line":1671},[3903],{"type":19,"tag":241,"props":3904,"children":3905},{"style":796},[3906],{"type":24,"value":3907},"        )\n",{"type":19,"tag":241,"props":3909,"children":3910},{"class":243,"line":1704},[3911],{"type":19,"tag":241,"props":3912,"children":3913},{"style":796},[3914],{"type":24,"value":3495},{"type":19,"tag":241,"props":3916,"children":3917},{"class":243,"line":1712},[3918],{"type":19,"tag":241,"props":3919,"children":3920},{"style":796},[3921],{"type":24,"value":3581},{"type":19,"tag":241,"props":3923,"children":3924},{"class":243,"line":2022},[3925],{"type":19,"tag":241,"props":3926,"children":3927},{"style":796},[3928],{"type":24,"value":3589},{"type":19,"tag":241,"props":3930,"children":3931},{"class":243,"line":3592},[3932],{"type":19,"tag":241,"props":3933,"children":3934},{"style":796},[3935],{"type":24,"value":3185},{"type":19,"tag":20,"props":3937,"children":3938},{},[3939,3941,3945,3946,3950,3952,3957],{"type":24,"value":3940},"Finally, we need to control the states (",{"type":19,"tag":103,"props":3942,"children":3943},{},[3944],{"type":24,"value":3311},{"type":24,"value":3299},{"type":19,"tag":103,"props":3947,"children":3948},{},[3949],{"type":24,"value":3318},{"type":24,"value":3951},") in our component so that the animation take place. We\nwill declare a new component property and assign it one the two states and then create a ",{"type":19,"tag":103,"props":3953,"children":3954},{},[3955],{"type":24,"value":3956},"toggleWiggle()",{"type":24,"value":3958}," method to\nswitch the state to the other one.",{"type":19,"tag":231,"props":3960,"children":3962},{"className":2240,"code":3961,"language":2242,"meta":7,"style":7},"// wiggle-ng-animations-1.component.ts\n@Component({\n  selector: 'app-wiggle-ng-animations-1',\n  standalone: true,\n  imports: [],\n  templateUrl: './wiggle-ng-animations-1.component.html',\n  styleUrl: './wiggle-ng-animations-1.component.scss',\n  animations: [\n      // all triggers go here\n  ],\n})\nexport class WiggleNgAnimations1Component {\n  wiggle = 'start';\n\n  toggleWiggle() {\n    this.wiggle = this.wiggle == 'start' ? 'end' : 'start';\n  }\n}\n",[3963],{"type":19,"tag":193,"props":3964,"children":3965},{"__ignoreMap":7},[3966,3977,3992,4017,4035,4043,4068,4093,4100,4112,4119,4126,4146,4174,4181,4197,4283,4290],{"type":19,"tag":241,"props":3967,"children":3968},{"class":243,"line":14},[3969,3973],{"type":19,"tag":241,"props":3970,"children":3971},{"style":572},[3972],{"type":24,"value":2254},{"type":19,"tag":241,"props":3974,"children":3975},{"style":578},[3976],{"type":24,"value":3345},{"type":19,"tag":241,"props":3978,"children":3979},{"class":243,"line":27},[3980,3984,3988],{"type":19,"tag":241,"props":3981,"children":3982},{"style":600},[3983],{"type":24,"value":1544},{"type":19,"tag":241,"props":3985,"children":3986},{"style":247},[3987],{"type":24,"value":3152},{"type":19,"tag":241,"props":3989,"children":3990},{"style":796},[3991],{"type":24,"value":3157},{"type":19,"tag":241,"props":3993,"children":3994},{"class":243,"line":331},[3995,4000,4004,4009,4013],{"type":19,"tag":241,"props":3996,"children":3997},{"style":796},[3998],{"type":24,"value":3999},"  selector: ",{"type":19,"tag":241,"props":4001,"children":4002},{"style":838},[4003],{"type":24,"value":2669},{"type":19,"tag":241,"props":4005,"children":4006},{"style":253},[4007],{"type":24,"value":4008},"app-wiggle-ng-animations-1",{"type":19,"tag":241,"props":4010,"children":4011},{"style":838},[4012],{"type":24,"value":2669},{"type":19,"tag":241,"props":4014,"children":4015},{"style":796},[4016],{"type":24,"value":3110},{"type":19,"tag":241,"props":4018,"children":4019},{"class":243,"line":956},[4020,4025,4031],{"type":19,"tag":241,"props":4021,"children":4022},{"style":796},[4023],{"type":24,"value":4024},"  standalone: ",{"type":19,"tag":241,"props":4026,"children":4028},{"style":4027},"--shiki-default:#FF5874",[4029],{"type":24,"value":4030},"true",{"type":19,"tag":241,"props":4032,"children":4033},{"style":796},[4034],{"type":24,"value":3110},{"type":19,"tag":241,"props":4036,"children":4037},{"class":243,"line":11},[4038],{"type":19,"tag":241,"props":4039,"children":4040},{"style":796},[4041],{"type":24,"value":4042},"  imports: [],\n",{"type":19,"tag":241,"props":4044,"children":4045},{"class":243,"line":1000},[4046,4051,4055,4060,4064],{"type":19,"tag":241,"props":4047,"children":4048},{"style":796},[4049],{"type":24,"value":4050},"  templateUrl: ",{"type":19,"tag":241,"props":4052,"children":4053},{"style":838},[4054],{"type":24,"value":2669},{"type":19,"tag":241,"props":4056,"children":4057},{"style":253},[4058],{"type":24,"value":4059},"./wiggle-ng-animations-1.component.html",{"type":19,"tag":241,"props":4061,"children":4062},{"style":838},[4063],{"type":24,"value":2669},{"type":19,"tag":241,"props":4065,"children":4066},{"style":796},[4067],{"type":24,"value":3110},{"type":19,"tag":241,"props":4069,"children":4070},{"class":243,"line":1021},[4071,4076,4080,4085,4089],{"type":19,"tag":241,"props":4072,"children":4073},{"style":796},[4074],{"type":24,"value":4075},"  styleUrl: ",{"type":19,"tag":241,"props":4077,"children":4078},{"style":838},[4079],{"type":24,"value":2669},{"type":19,"tag":241,"props":4081,"children":4082},{"style":253},[4083],{"type":24,"value":4084},"./wiggle-ng-animations-1.component.scss",{"type":19,"tag":241,"props":4086,"children":4087},{"style":838},[4088],{"type":24,"value":2669},{"type":19,"tag":241,"props":4090,"children":4091},{"style":796},[4092],{"type":24,"value":3110},{"type":19,"tag":241,"props":4094,"children":4095},{"class":243,"line":1043},[4096],{"type":19,"tag":241,"props":4097,"children":4098},{"style":796},[4099],{"type":24,"value":3380},{"type":19,"tag":241,"props":4101,"children":4102},{"class":243,"line":1070},[4103,4107],{"type":19,"tag":241,"props":4104,"children":4105},{"style":572},[4106],{"type":24,"value":3695},{"type":19,"tag":241,"props":4108,"children":4109},{"style":578},[4110],{"type":24,"value":4111}," all triggers go here\n",{"type":19,"tag":241,"props":4113,"children":4114},{"class":243,"line":1330},[4115],{"type":19,"tag":241,"props":4116,"children":4117},{"style":796},[4118],{"type":24,"value":3589},{"type":19,"tag":241,"props":4120,"children":4121},{"class":243,"line":1365},[4122],{"type":19,"tag":241,"props":4123,"children":4124},{"style":796},[4125],{"type":24,"value":3185},{"type":19,"tag":241,"props":4127,"children":4128},{"class":243,"line":1386},[4129,4133,4137,4142],{"type":19,"tag":241,"props":4130,"children":4131},{"style":1547},[4132],{"type":24,"value":2267},{"type":19,"tag":241,"props":4134,"children":4135},{"style":1541},[4136],{"type":24,"value":830},{"type":19,"tag":241,"props":4138,"children":4139},{"style":2274},[4140],{"type":24,"value":4141}," WiggleNgAnimations1Component",{"type":19,"tag":241,"props":4143,"children":4144},{"style":796},[4145],{"type":24,"value":922},{"type":19,"tag":241,"props":4147,"children":4148},{"class":243,"line":1408},[4149,4154,4158,4162,4166,4170],{"type":19,"tag":241,"props":4150,"children":4151},{"style":796},[4152],{"type":24,"value":4153},"  wiggle ",{"type":19,"tag":241,"props":4155,"children":4156},{"style":1541},[4157],{"type":24,"value":835},{"type":19,"tag":241,"props":4159,"children":4160},{"style":838},[4161],{"type":24,"value":3021},{"type":19,"tag":241,"props":4163,"children":4164},{"style":253},[4165],{"type":24,"value":3311},{"type":19,"tag":241,"props":4167,"children":4168},{"style":838},[4169],{"type":24,"value":2669},{"type":19,"tag":241,"props":4171,"children":4172},{"style":796},[4173],{"type":24,"value":953},{"type":19,"tag":241,"props":4175,"children":4176},{"class":243,"line":1654},[4177],{"type":19,"tag":241,"props":4178,"children":4179},{"emptyLinePlaceholder":41},[4180],{"type":24,"value":1535},{"type":19,"tag":241,"props":4182,"children":4183},{"class":243,"line":1662},[4184,4189,4193],{"type":19,"tag":241,"props":4185,"children":4186},{"style":247},[4187],{"type":24,"value":4188},"  toggleWiggle",{"type":19,"tag":241,"props":4190,"children":4191},{"style":838},[4192],{"type":24,"value":2364},{"type":19,"tag":241,"props":4194,"children":4195},{"style":796},[4196],{"type":24,"value":922},{"type":19,"tag":241,"props":4198,"children":4199},{"class":243,"line":1671},[4200,4204,4208,4212,4216,4221,4225,4229,4234,4238,4242,4246,4251,4255,4259,4263,4267,4271,4275,4279],{"type":19,"tag":241,"props":4201,"children":4202},{"style":779},[4203],{"type":24,"value":2376},{"type":19,"tag":241,"props":4205,"children":4206},{"style":1547},[4207],{"type":24,"value":96},{"type":19,"tag":241,"props":4209,"children":4210},{"style":2462},[4211],{"type":24,"value":744},{"type":19,"tag":241,"props":4213,"children":4214},{"style":1541},[4215],{"type":24,"value":3074},{"type":19,"tag":241,"props":4217,"children":4218},{"style":779},[4219],{"type":24,"value":4220}," this",{"type":19,"tag":241,"props":4222,"children":4223},{"style":1547},[4224],{"type":24,"value":96},{"type":19,"tag":241,"props":4226,"children":4227},{"style":2462},[4228],{"type":24,"value":744},{"type":19,"tag":241,"props":4230,"children":4231},{"style":1541},[4232],{"type":24,"value":4233}," ==",{"type":19,"tag":241,"props":4235,"children":4236},{"style":838},[4237],{"type":24,"value":3021},{"type":19,"tag":241,"props":4239,"children":4240},{"style":253},[4241],{"type":24,"value":3311},{"type":19,"tag":241,"props":4243,"children":4244},{"style":838},[4245],{"type":24,"value":2669},{"type":19,"tag":241,"props":4247,"children":4248},{"style":1541},[4249],{"type":24,"value":4250}," ?",{"type":19,"tag":241,"props":4252,"children":4253},{"style":838},[4254],{"type":24,"value":3021},{"type":19,"tag":241,"props":4256,"children":4257},{"style":253},[4258],{"type":24,"value":3318},{"type":19,"tag":241,"props":4260,"children":4261},{"style":838},[4262],{"type":24,"value":2669},{"type":19,"tag":241,"props":4264,"children":4265},{"style":1541},[4266],{"type":24,"value":2325},{"type":19,"tag":241,"props":4268,"children":4269},{"style":838},[4270],{"type":24,"value":3021},{"type":19,"tag":241,"props":4272,"children":4273},{"style":253},[4274],{"type":24,"value":3311},{"type":19,"tag":241,"props":4276,"children":4277},{"style":838},[4278],{"type":24,"value":2669},{"type":19,"tag":241,"props":4280,"children":4281},{"style":796},[4282],{"type":24,"value":953},{"type":19,"tag":241,"props":4284,"children":4285},{"class":243,"line":1704},[4286],{"type":19,"tag":241,"props":4287,"children":4288},{"style":796},[4289],{"type":24,"value":1927},{"type":19,"tag":241,"props":4291,"children":4292},{"class":243,"line":1712},[4293],{"type":19,"tag":241,"props":4294,"children":4295},{"style":796},[4296],{"type":24,"value":1076},{"type":19,"tag":20,"props":4298,"children":4299},{},[4300,4302,4308],{"type":24,"value":4301},"Then in the template we need to attach the animation to the button using ",{"type":19,"tag":193,"props":4303,"children":4305},{"className":4304},[],[4306],{"type":24,"value":4307},"@ANIMATION_TRIGGER",{"type":24,"value":4309}," syntax and also react to\nclick event and toggle the state on the animation:",{"type":19,"tag":231,"props":4311,"children":4313},{"className":749,"code":4312,"language":751,"meta":7,"style":7},"\u003C!-- wiggle-ng-animations-1.component.html -->\n\u003Cdiv>Angular Animations Two States\u003C/div>\n\u003Cbutton\n  class=\"button\"\n  [@wiggle]=\"wiggle\"\n  (click)=\"toggleWiggle()\"\n>Click me!\u003C/button>\n",[4314],{"type":19,"tag":193,"props":4315,"children":4316},{"__ignoreMap":7},[4317,4333,4365,4377,4401,4425,4449],{"type":19,"tag":241,"props":4318,"children":4319},{"class":243,"line":14},[4320,4324,4329],{"type":19,"tag":241,"props":4321,"children":4322},{"style":572},[4323],{"type":24,"value":763},{"type":19,"tag":241,"props":4325,"children":4326},{"style":578},[4327],{"type":24,"value":4328}," wiggle-ng-animations-1.component.html ",{"type":19,"tag":241,"props":4330,"children":4331},{"style":572},[4332],{"type":24,"value":773},{"type":19,"tag":241,"props":4334,"children":4335},{"class":243,"line":27},[4336,4340,4344,4348,4353,4357,4361],{"type":19,"tag":241,"props":4337,"children":4338},{"style":779},[4339],{"type":24,"value":782},{"type":19,"tag":241,"props":4341,"children":4342},{"style":785},[4343],{"type":24,"value":788},{"type":19,"tag":241,"props":4345,"children":4346},{"style":779},[4347],{"type":24,"value":793},{"type":19,"tag":241,"props":4349,"children":4350},{"style":796},[4351],{"type":24,"value":4352},"Angular Animations Two States",{"type":19,"tag":241,"props":4354,"children":4355},{"style":779},[4356],{"type":24,"value":804},{"type":19,"tag":241,"props":4358,"children":4359},{"style":785},[4360],{"type":24,"value":788},{"type":19,"tag":241,"props":4362,"children":4363},{"style":779},[4364],{"type":24,"value":813},{"type":19,"tag":241,"props":4366,"children":4367},{"class":243,"line":331},[4368,4372],{"type":19,"tag":241,"props":4369,"children":4370},{"style":779},[4371],{"type":24,"value":782},{"type":19,"tag":241,"props":4373,"children":4374},{"style":785},[4375],{"type":24,"value":4376},"button\n",{"type":19,"tag":241,"props":4378,"children":4379},{"class":243,"line":956},[4380,4385,4389,4393,4397],{"type":19,"tag":241,"props":4381,"children":4382},{"style":827},[4383],{"type":24,"value":4384},"  class",{"type":19,"tag":241,"props":4386,"children":4387},{"style":779},[4388],{"type":24,"value":835},{"type":19,"tag":241,"props":4390,"children":4391},{"style":838},[4392],{"type":24,"value":841},{"type":19,"tag":241,"props":4394,"children":4395},{"style":253},[4396],{"type":24,"value":737},{"type":19,"tag":241,"props":4398,"children":4399},{"style":838},[4400],{"type":24,"value":2162},{"type":19,"tag":241,"props":4402,"children":4403},{"class":243,"line":11},[4404,4409,4413,4417,4421],{"type":19,"tag":241,"props":4405,"children":4406},{"style":827},[4407],{"type":24,"value":4408},"  [@wiggle]",{"type":19,"tag":241,"props":4410,"children":4411},{"style":779},[4412],{"type":24,"value":835},{"type":19,"tag":241,"props":4414,"children":4415},{"style":838},[4416],{"type":24,"value":841},{"type":19,"tag":241,"props":4418,"children":4419},{"style":253},[4420],{"type":24,"value":744},{"type":19,"tag":241,"props":4422,"children":4423},{"style":838},[4424],{"type":24,"value":2162},{"type":19,"tag":241,"props":4426,"children":4427},{"class":243,"line":1000},[4428,4433,4437,4441,4445],{"type":19,"tag":241,"props":4429,"children":4430},{"style":827},[4431],{"type":24,"value":4432},"  (click)",{"type":19,"tag":241,"props":4434,"children":4435},{"style":779},[4436],{"type":24,"value":835},{"type":19,"tag":241,"props":4438,"children":4439},{"style":838},[4440],{"type":24,"value":841},{"type":19,"tag":241,"props":4442,"children":4443},{"style":253},[4444],{"type":24,"value":3956},{"type":19,"tag":241,"props":4446,"children":4447},{"style":838},[4448],{"type":24,"value":2162},{"type":19,"tag":241,"props":4450,"children":4451},{"class":243,"line":1021},[4452,4456,4460,4464,4468],{"type":19,"tag":241,"props":4453,"children":4454},{"style":779},[4455],{"type":24,"value":793},{"type":19,"tag":241,"props":4457,"children":4458},{"style":796},[4459],{"type":24,"value":2953},{"type":19,"tag":241,"props":4461,"children":4462},{"style":779},[4463],{"type":24,"value":804},{"type":19,"tag":241,"props":4465,"children":4466},{"style":785},[4467],{"type":24,"value":737},{"type":19,"tag":241,"props":4469,"children":4470},{"style":779},[4471],{"type":24,"value":813},{"type":19,"tag":70,"props":4473,"children":4475},{"id":4474},"angular-animations-single-state",[4476],{"type":24,"value":4477},"Angular Animations - Single state",{"type":19,"tag":20,"props":4479,"children":4480},{},[4481,4483,4488],{"type":24,"value":4482},"Instead of using two states that store the same styles we can use only one and name it ",{"type":19,"tag":103,"props":4484,"children":4485},{},[4486],{"type":24,"value":4487},"default",{"type":24,"value":4489},". Afterward, when\ndeclaring the transition, for the state change expression we will use the wildcard (void) state as the initial and the default\nas we final state of the transition. We will keep the animate method and its keyframes.",{"type":19,"tag":231,"props":4491,"children":4493},{"className":2240,"code":4492,"language":2242,"meta":7,"style":7},"// wiggle-ng-animations-2.component.ts\n@Component({\n  ...,\n  animations: [\n    trigger('wiggle', [\n      state(\n        'default',\n        style({\n          rotate: '0deg',\n        })\n      ),\n      transition(\n        '* => default',\n        animate(\n          '1s',\n          keyframes([\n            style({ rotate: '-10deg', offset: 0.25 }),\n            style({ rotate: '10deg', offset: 0.5 }),\n            style({ rotate: '-10deg', offset: 0.75 }),\n          ])\n        )\n      ),\n    ]),\n  ],\n})\n",[4494],{"type":19,"tag":193,"props":4495,"children":4496},{"__ignoreMap":7},[4497,4509,4524,4535,4542,4569,4580,4599,4610,4633,4640,4647,4658,4678,4689,4708,4719,4754,4789,4824,4831,4839,4847,4855,4863],{"type":19,"tag":241,"props":4498,"children":4499},{"class":243,"line":14},[4500,4504],{"type":19,"tag":241,"props":4501,"children":4502},{"style":572},[4503],{"type":24,"value":2254},{"type":19,"tag":241,"props":4505,"children":4506},{"style":578},[4507],{"type":24,"value":4508}," wiggle-ng-animations-2.component.ts\n",{"type":19,"tag":241,"props":4510,"children":4511},{"class":243,"line":27},[4512,4516,4520],{"type":19,"tag":241,"props":4513,"children":4514},{"style":600},[4515],{"type":24,"value":1544},{"type":19,"tag":241,"props":4517,"children":4518},{"style":247},[4519],{"type":24,"value":3152},{"type":19,"tag":241,"props":4521,"children":4522},{"style":796},[4523],{"type":24,"value":3157},{"type":19,"tag":241,"props":4525,"children":4526},{"class":243,"line":331},[4527,4531],{"type":19,"tag":241,"props":4528,"children":4529},{"style":779},[4530],{"type":24,"value":3368},{"type":19,"tag":241,"props":4532,"children":4533},{"style":796},[4534],{"type":24,"value":3110},{"type":19,"tag":241,"props":4536,"children":4537},{"class":243,"line":956},[4538],{"type":19,"tag":241,"props":4539,"children":4540},{"style":796},[4541],{"type":24,"value":3380},{"type":19,"tag":241,"props":4543,"children":4544},{"class":243,"line":11},[4545,4549,4553,4557,4561,4565],{"type":19,"tag":241,"props":4546,"children":4547},{"style":247},[4548],{"type":24,"value":3388},{"type":19,"tag":241,"props":4550,"children":4551},{"style":796},[4552],{"type":24,"value":1145},{"type":19,"tag":241,"props":4554,"children":4555},{"style":838},[4556],{"type":24,"value":2669},{"type":19,"tag":241,"props":4558,"children":4559},{"style":253},[4560],{"type":24,"value":744},{"type":19,"tag":241,"props":4562,"children":4563},{"style":838},[4564],{"type":24,"value":2669},{"type":19,"tag":241,"props":4566,"children":4567},{"style":796},[4568],{"type":24,"value":3409},{"type":19,"tag":241,"props":4570,"children":4571},{"class":243,"line":1000},[4572,4576],{"type":19,"tag":241,"props":4573,"children":4574},{"style":247},[4575],{"type":24,"value":3417},{"type":19,"tag":241,"props":4577,"children":4578},{"style":796},[4579],{"type":24,"value":3422},{"type":19,"tag":241,"props":4581,"children":4582},{"class":243,"line":1021},[4583,4587,4591,4595],{"type":19,"tag":241,"props":4584,"children":4585},{"style":838},[4586],{"type":24,"value":3430},{"type":19,"tag":241,"props":4588,"children":4589},{"style":253},[4590],{"type":24,"value":4487},{"type":19,"tag":241,"props":4592,"children":4593},{"style":838},[4594],{"type":24,"value":2669},{"type":19,"tag":241,"props":4596,"children":4597},{"style":796},[4598],{"type":24,"value":3110},{"type":19,"tag":241,"props":4600,"children":4601},{"class":243,"line":1043},[4602,4606],{"type":19,"tag":241,"props":4603,"children":4604},{"style":247},[4605],{"type":24,"value":3450},{"type":19,"tag":241,"props":4607,"children":4608},{"style":796},[4609],{"type":24,"value":3157},{"type":19,"tag":241,"props":4611,"children":4612},{"class":243,"line":1070},[4613,4617,4621,4625,4629],{"type":19,"tag":241,"props":4614,"children":4615},{"style":796},[4616],{"type":24,"value":3462},{"type":19,"tag":241,"props":4618,"children":4619},{"style":838},[4620],{"type":24,"value":2669},{"type":19,"tag":241,"props":4622,"children":4623},{"style":253},[4624],{"type":24,"value":3471},{"type":19,"tag":241,"props":4626,"children":4627},{"style":838},[4628],{"type":24,"value":2669},{"type":19,"tag":241,"props":4630,"children":4631},{"style":796},[4632],{"type":24,"value":3110},{"type":19,"tag":241,"props":4634,"children":4635},{"class":243,"line":1330},[4636],{"type":19,"tag":241,"props":4637,"children":4638},{"style":796},[4639],{"type":24,"value":3487},{"type":19,"tag":241,"props":4641,"children":4642},{"class":243,"line":1365},[4643],{"type":19,"tag":241,"props":4644,"children":4645},{"style":796},[4646],{"type":24,"value":3495},{"type":19,"tag":241,"props":4648,"children":4649},{"class":243,"line":1386},[4650,4654],{"type":19,"tag":241,"props":4651,"children":4652},{"style":247},[4653],{"type":24,"value":3708},{"type":19,"tag":241,"props":4655,"children":4656},{"style":796},[4657],{"type":24,"value":3422},{"type":19,"tag":241,"props":4659,"children":4660},{"class":243,"line":1408},[4661,4665,4670,4674],{"type":19,"tag":241,"props":4662,"children":4663},{"style":838},[4664],{"type":24,"value":3430},{"type":19,"tag":241,"props":4666,"children":4667},{"style":253},[4668],{"type":24,"value":4669},"* => default",{"type":19,"tag":241,"props":4671,"children":4672},{"style":838},[4673],{"type":24,"value":2669},{"type":19,"tag":241,"props":4675,"children":4676},{"style":796},[4677],{"type":24,"value":3110},{"type":19,"tag":241,"props":4679,"children":4680},{"class":243,"line":1654},[4681,4685],{"type":19,"tag":241,"props":4682,"children":4683},{"style":247},[4684],{"type":24,"value":3740},{"type":19,"tag":241,"props":4686,"children":4687},{"style":796},[4688],{"type":24,"value":3422},{"type":19,"tag":241,"props":4690,"children":4691},{"class":243,"line":1662},[4692,4696,4700,4704],{"type":19,"tag":241,"props":4693,"children":4694},{"style":838},[4695],{"type":24,"value":3752},{"type":19,"tag":241,"props":4697,"children":4698},{"style":253},[4699],{"type":24,"value":3757},{"type":19,"tag":241,"props":4701,"children":4702},{"style":838},[4703],{"type":24,"value":2669},{"type":19,"tag":241,"props":4705,"children":4706},{"style":796},[4707],{"type":24,"value":3110},{"type":19,"tag":241,"props":4709,"children":4710},{"class":243,"line":1671},[4711,4715],{"type":19,"tag":241,"props":4712,"children":4713},{"style":247},[4714],{"type":24,"value":3773},{"type":19,"tag":241,"props":4716,"children":4717},{"style":796},[4718],{"type":24,"value":3778},{"type":19,"tag":241,"props":4720,"children":4721},{"class":243,"line":1704},[4722,4726,4730,4734,4738,4742,4746,4750],{"type":19,"tag":241,"props":4723,"children":4724},{"style":247},[4725],{"type":24,"value":3786},{"type":19,"tag":241,"props":4727,"children":4728},{"style":796},[4729],{"type":24,"value":3791},{"type":19,"tag":241,"props":4731,"children":4732},{"style":838},[4733],{"type":24,"value":2669},{"type":19,"tag":241,"props":4735,"children":4736},{"style":253},[4737],{"type":24,"value":3800},{"type":19,"tag":241,"props":4739,"children":4740},{"style":838},[4741],{"type":24,"value":2669},{"type":19,"tag":241,"props":4743,"children":4744},{"style":796},[4745],{"type":24,"value":3809},{"type":19,"tag":241,"props":4747,"children":4748},{"style":939},[4749],{"type":24,"value":3814},{"type":19,"tag":241,"props":4751,"children":4752},{"style":796},[4753],{"type":24,"value":3819},{"type":19,"tag":241,"props":4755,"children":4756},{"class":243,"line":1712},[4757,4761,4765,4769,4773,4777,4781,4785],{"type":19,"tag":241,"props":4758,"children":4759},{"style":247},[4760],{"type":24,"value":3786},{"type":19,"tag":241,"props":4762,"children":4763},{"style":796},[4764],{"type":24,"value":3791},{"type":19,"tag":241,"props":4766,"children":4767},{"style":838},[4768],{"type":24,"value":2669},{"type":19,"tag":241,"props":4770,"children":4771},{"style":253},[4772],{"type":24,"value":3839},{"type":19,"tag":241,"props":4774,"children":4775},{"style":838},[4776],{"type":24,"value":2669},{"type":19,"tag":241,"props":4778,"children":4779},{"style":796},[4780],{"type":24,"value":3809},{"type":19,"tag":241,"props":4782,"children":4783},{"style":939},[4784],{"type":24,"value":1345},{"type":19,"tag":241,"props":4786,"children":4787},{"style":796},[4788],{"type":24,"value":3819},{"type":19,"tag":241,"props":4790,"children":4791},{"class":243,"line":2022},[4792,4796,4800,4804,4808,4812,4816,4820],{"type":19,"tag":241,"props":4793,"children":4794},{"style":247},[4795],{"type":24,"value":3786},{"type":19,"tag":241,"props":4797,"children":4798},{"style":796},[4799],{"type":24,"value":3791},{"type":19,"tag":241,"props":4801,"children":4802},{"style":838},[4803],{"type":24,"value":2669},{"type":19,"tag":241,"props":4805,"children":4806},{"style":253},[4807],{"type":24,"value":3800},{"type":19,"tag":241,"props":4809,"children":4810},{"style":838},[4811],{"type":24,"value":2669},{"type":19,"tag":241,"props":4813,"children":4814},{"style":796},[4815],{"type":24,"value":3809},{"type":19,"tag":241,"props":4817,"children":4818},{"style":939},[4819],{"type":24,"value":3887},{"type":19,"tag":241,"props":4821,"children":4822},{"style":796},[4823],{"type":24,"value":3819},{"type":19,"tag":241,"props":4825,"children":4826},{"class":243,"line":3592},[4827],{"type":19,"tag":241,"props":4828,"children":4829},{"style":796},[4830],{"type":24,"value":3899},{"type":19,"tag":241,"props":4832,"children":4834},{"class":243,"line":4833},21,[4835],{"type":19,"tag":241,"props":4836,"children":4837},{"style":796},[4838],{"type":24,"value":3907},{"type":19,"tag":241,"props":4840,"children":4842},{"class":243,"line":4841},22,[4843],{"type":19,"tag":241,"props":4844,"children":4845},{"style":796},[4846],{"type":24,"value":3495},{"type":19,"tag":241,"props":4848,"children":4850},{"class":243,"line":4849},23,[4851],{"type":19,"tag":241,"props":4852,"children":4853},{"style":796},[4854],{"type":24,"value":3581},{"type":19,"tag":241,"props":4856,"children":4858},{"class":243,"line":4857},24,[4859],{"type":19,"tag":241,"props":4860,"children":4861},{"style":796},[4862],{"type":24,"value":3589},{"type":19,"tag":241,"props":4864,"children":4866},{"class":243,"line":4865},25,[4867],{"type":19,"tag":241,"props":4868,"children":4869},{"style":796},[4870],{"type":24,"value":3185},{"type":19,"tag":20,"props":4872,"children":4873},{},[4874,4876,4880,4882,4887],{"type":24,"value":4875},"In this case let's implement the 'toggle' logic directly in the template and reset the wiggle property to ",{"type":19,"tag":103,"props":4877,"children":4878},{},[4879],{"type":24,"value":4487},{"type":24,"value":4881},". Since\nthe animation transition is only one way, from void to default, we need to make sure that after the animation ends we reset the state\nback to void. This is why we need to listen for ",{"type":19,"tag":103,"props":4883,"children":4884},{},[4885],{"type":24,"value":4886},"@wiggle.done",{"type":24,"value":4888}," and attach a method that will be triggered when the event happens.",{"type":19,"tag":231,"props":4890,"children":4892},{"className":749,"code":4891,"language":751,"meta":7,"style":7},"\u003C!-- wiggle-ng-animations-2.component.html -->\n\u003Cdiv>Angular Animations Single State\u003C/div>\n\u003Cbutton\n  class=\"button\"\n  [@wiggle]=\"wiggle\"\n  (@wiggle.done)=\"onAnimationDone($event)\"\n  (click)=\"wiggle = 'default'\"\n>Click me!\u003C/button>\n",[4893],{"type":19,"tag":193,"props":4894,"children":4895},{"__ignoreMap":7},[4896,4912,4944,4955,4978,5001,5026,5050],{"type":19,"tag":241,"props":4897,"children":4898},{"class":243,"line":14},[4899,4903,4908],{"type":19,"tag":241,"props":4900,"children":4901},{"style":572},[4902],{"type":24,"value":763},{"type":19,"tag":241,"props":4904,"children":4905},{"style":578},[4906],{"type":24,"value":4907}," wiggle-ng-animations-2.component.html ",{"type":19,"tag":241,"props":4909,"children":4910},{"style":572},[4911],{"type":24,"value":773},{"type":19,"tag":241,"props":4913,"children":4914},{"class":243,"line":27},[4915,4919,4923,4927,4932,4936,4940],{"type":19,"tag":241,"props":4916,"children":4917},{"style":779},[4918],{"type":24,"value":782},{"type":19,"tag":241,"props":4920,"children":4921},{"style":785},[4922],{"type":24,"value":788},{"type":19,"tag":241,"props":4924,"children":4925},{"style":779},[4926],{"type":24,"value":793},{"type":19,"tag":241,"props":4928,"children":4929},{"style":796},[4930],{"type":24,"value":4931},"Angular Animations Single State",{"type":19,"tag":241,"props":4933,"children":4934},{"style":779},[4935],{"type":24,"value":804},{"type":19,"tag":241,"props":4937,"children":4938},{"style":785},[4939],{"type":24,"value":788},{"type":19,"tag":241,"props":4941,"children":4942},{"style":779},[4943],{"type":24,"value":813},{"type":19,"tag":241,"props":4945,"children":4946},{"class":243,"line":331},[4947,4951],{"type":19,"tag":241,"props":4948,"children":4949},{"style":779},[4950],{"type":24,"value":782},{"type":19,"tag":241,"props":4952,"children":4953},{"style":785},[4954],{"type":24,"value":4376},{"type":19,"tag":241,"props":4956,"children":4957},{"class":243,"line":956},[4958,4962,4966,4970,4974],{"type":19,"tag":241,"props":4959,"children":4960},{"style":827},[4961],{"type":24,"value":4384},{"type":19,"tag":241,"props":4963,"children":4964},{"style":779},[4965],{"type":24,"value":835},{"type":19,"tag":241,"props":4967,"children":4968},{"style":838},[4969],{"type":24,"value":841},{"type":19,"tag":241,"props":4971,"children":4972},{"style":253},[4973],{"type":24,"value":737},{"type":19,"tag":241,"props":4975,"children":4976},{"style":838},[4977],{"type":24,"value":2162},{"type":19,"tag":241,"props":4979,"children":4980},{"class":243,"line":11},[4981,4985,4989,4993,4997],{"type":19,"tag":241,"props":4982,"children":4983},{"style":827},[4984],{"type":24,"value":4408},{"type":19,"tag":241,"props":4986,"children":4987},{"style":779},[4988],{"type":24,"value":835},{"type":19,"tag":241,"props":4990,"children":4991},{"style":838},[4992],{"type":24,"value":841},{"type":19,"tag":241,"props":4994,"children":4995},{"style":253},[4996],{"type":24,"value":744},{"type":19,"tag":241,"props":4998,"children":4999},{"style":838},[5000],{"type":24,"value":2162},{"type":19,"tag":241,"props":5002,"children":5003},{"class":243,"line":1000},[5004,5009,5013,5017,5022],{"type":19,"tag":241,"props":5005,"children":5006},{"style":827},[5007],{"type":24,"value":5008},"  (@wiggle.done)",{"type":19,"tag":241,"props":5010,"children":5011},{"style":779},[5012],{"type":24,"value":835},{"type":19,"tag":241,"props":5014,"children":5015},{"style":838},[5016],{"type":24,"value":841},{"type":19,"tag":241,"props":5018,"children":5019},{"style":253},[5020],{"type":24,"value":5021},"onAnimationDone($event)",{"type":19,"tag":241,"props":5023,"children":5024},{"style":838},[5025],{"type":24,"value":2162},{"type":19,"tag":241,"props":5027,"children":5028},{"class":243,"line":1021},[5029,5033,5037,5041,5046],{"type":19,"tag":241,"props":5030,"children":5031},{"style":827},[5032],{"type":24,"value":4432},{"type":19,"tag":241,"props":5034,"children":5035},{"style":779},[5036],{"type":24,"value":835},{"type":19,"tag":241,"props":5038,"children":5039},{"style":838},[5040],{"type":24,"value":841},{"type":19,"tag":241,"props":5042,"children":5043},{"style":253},[5044],{"type":24,"value":5045},"wiggle = 'default'",{"type":19,"tag":241,"props":5047,"children":5048},{"style":838},[5049],{"type":24,"value":2162},{"type":19,"tag":241,"props":5051,"children":5052},{"class":243,"line":1043},[5053,5057,5061,5065,5069],{"type":19,"tag":241,"props":5054,"children":5055},{"style":779},[5056],{"type":24,"value":793},{"type":19,"tag":241,"props":5058,"children":5059},{"style":796},[5060],{"type":24,"value":2953},{"type":19,"tag":241,"props":5062,"children":5063},{"style":779},[5064],{"type":24,"value":804},{"type":19,"tag":241,"props":5066,"children":5067},{"style":785},[5068],{"type":24,"value":737},{"type":19,"tag":241,"props":5070,"children":5071},{"style":779},[5072],{"type":24,"value":813},{"type":19,"tag":20,"props":5074,"children":5075},{},[5076,5078,5083,5085,5089],{"type":24,"value":5077},"The methods itself will check the 'toState' property on the ",{"type":19,"tag":103,"props":5079,"children":5080},{},[5081],{"type":24,"value":5082},"AnimationEvent",{"type":24,"value":5084}," and will reset it to an empty string if the\nstate is ",{"type":19,"tag":103,"props":5086,"children":5087},{},[5088],{"type":24,"value":4487},{"type":24,"value":5090}," - and this happens when the button is clicked.",{"type":19,"tag":231,"props":5092,"children":5094},{"className":2240,"code":5093,"language":2242,"meta":7,"style":7},"// wiggle-ng-animations-2.component.ts\nexport class WiggleNgAnimations2Component {\n  wiggle = '';\n\n  onAnimationDone(event: AnimationEvent): void {\n    if (event.toState === 'default') {\n      this.wiggle = ''; // Reset the state to trigger the animation again\n    }\n  }\n}\n",[5095],{"type":19,"tag":193,"props":5096,"children":5097},{"__ignoreMap":7},[5098,5109,5129,5149,5156,5200,5244,5282,5289,5296],{"type":19,"tag":241,"props":5099,"children":5100},{"class":243,"line":14},[5101,5105],{"type":19,"tag":241,"props":5102,"children":5103},{"style":572},[5104],{"type":24,"value":2254},{"type":19,"tag":241,"props":5106,"children":5107},{"style":578},[5108],{"type":24,"value":4508},{"type":19,"tag":241,"props":5110,"children":5111},{"class":243,"line":27},[5112,5116,5120,5125],{"type":19,"tag":241,"props":5113,"children":5114},{"style":1547},[5115],{"type":24,"value":2267},{"type":19,"tag":241,"props":5117,"children":5118},{"style":1541},[5119],{"type":24,"value":830},{"type":19,"tag":241,"props":5121,"children":5122},{"style":2274},[5123],{"type":24,"value":5124}," WiggleNgAnimations2Component",{"type":19,"tag":241,"props":5126,"children":5127},{"style":796},[5128],{"type":24,"value":922},{"type":19,"tag":241,"props":5130,"children":5131},{"class":243,"line":331},[5132,5136,5140,5145],{"type":19,"tag":241,"props":5133,"children":5134},{"style":796},[5135],{"type":24,"value":4153},{"type":19,"tag":241,"props":5137,"children":5138},{"style":1541},[5139],{"type":24,"value":835},{"type":19,"tag":241,"props":5141,"children":5142},{"style":838},[5143],{"type":24,"value":5144}," ''",{"type":19,"tag":241,"props":5146,"children":5147},{"style":796},[5148],{"type":24,"value":953},{"type":19,"tag":241,"props":5150,"children":5151},{"class":243,"line":956},[5152],{"type":19,"tag":241,"props":5153,"children":5154},{"emptyLinePlaceholder":41},[5155],{"type":24,"value":1535},{"type":19,"tag":241,"props":5157,"children":5158},{"class":243,"line":11},[5159,5164,5168,5173,5177,5182,5187,5191,5196],{"type":19,"tag":241,"props":5160,"children":5161},{"style":247},[5162],{"type":24,"value":5163},"  onAnimationDone",{"type":19,"tag":241,"props":5165,"children":5166},{"style":838},[5167],{"type":24,"value":1145},{"type":19,"tag":241,"props":5169,"children":5170},{"style":1553},[5171],{"type":24,"value":5172},"event",{"type":19,"tag":241,"props":5174,"children":5175},{"style":779},[5176],{"type":24,"value":912},{"type":19,"tag":241,"props":5178,"children":5179},{"style":2274},[5180],{"type":24,"value":5181}," AnimationEvent",{"type":19,"tag":241,"props":5183,"children":5184},{"style":838},[5185],{"type":24,"value":5186},")",{"type":19,"tag":241,"props":5188,"children":5189},{"style":779},[5190],{"type":24,"value":912},{"type":19,"tag":241,"props":5192,"children":5193},{"style":909},[5194],{"type":24,"value":5195}," void",{"type":19,"tag":241,"props":5197,"children":5198},{"style":796},[5199],{"type":24,"value":922},{"type":19,"tag":241,"props":5201,"children":5202},{"class":243,"line":1000},[5203,5208,5213,5217,5222,5227,5231,5235,5239],{"type":19,"tag":241,"props":5204,"children":5205},{"style":1541},[5206],{"type":24,"value":5207},"    if",{"type":19,"tag":241,"props":5209,"children":5210},{"style":796},[5211],{"type":24,"value":5212}," (event",{"type":19,"tag":241,"props":5214,"children":5215},{"style":1547},[5216],{"type":24,"value":96},{"type":19,"tag":241,"props":5218,"children":5219},{"style":2462},[5220],{"type":24,"value":5221},"toState",{"type":19,"tag":241,"props":5223,"children":5224},{"style":1541},[5225],{"type":24,"value":5226}," ===",{"type":19,"tag":241,"props":5228,"children":5229},{"style":838},[5230],{"type":24,"value":3021},{"type":19,"tag":241,"props":5232,"children":5233},{"style":253},[5234],{"type":24,"value":4487},{"type":19,"tag":241,"props":5236,"children":5237},{"style":838},[5238],{"type":24,"value":2669},{"type":19,"tag":241,"props":5240,"children":5241},{"style":796},[5242],{"type":24,"value":5243},") {\n",{"type":19,"tag":241,"props":5245,"children":5246},{"class":243,"line":1021},[5247,5252,5256,5260,5264,5268,5273,5277],{"type":19,"tag":241,"props":5248,"children":5249},{"style":779},[5250],{"type":24,"value":5251},"      this",{"type":19,"tag":241,"props":5253,"children":5254},{"style":1547},[5255],{"type":24,"value":96},{"type":19,"tag":241,"props":5257,"children":5258},{"style":2462},[5259],{"type":24,"value":744},{"type":19,"tag":241,"props":5261,"children":5262},{"style":1541},[5263],{"type":24,"value":3074},{"type":19,"tag":241,"props":5265,"children":5266},{"style":838},[5267],{"type":24,"value":5144},{"type":19,"tag":241,"props":5269,"children":5270},{"style":796},[5271],{"type":24,"value":5272},"; ",{"type":19,"tag":241,"props":5274,"children":5275},{"style":572},[5276],{"type":24,"value":2254},{"type":19,"tag":241,"props":5278,"children":5279},{"style":578},[5280],{"type":24,"value":5281}," Reset the state to trigger the animation again\n",{"type":19,"tag":241,"props":5283,"children":5284},{"class":243,"line":1043},[5285],{"type":19,"tag":241,"props":5286,"children":5287},{"style":796},[5288],{"type":24,"value":1611},{"type":19,"tag":241,"props":5290,"children":5291},{"class":243,"line":1070},[5292],{"type":19,"tag":241,"props":5293,"children":5294},{"style":796},[5295],{"type":24,"value":1927},{"type":19,"tag":241,"props":5297,"children":5298},{"class":243,"line":1330},[5299],{"type":19,"tag":241,"props":5300,"children":5301},{"style":796},[5302],{"type":24,"value":1076},{"type":19,"tag":20,"props":5304,"children":5305},{},[5306],{"type":24,"value":5307},"That's pretty much it, we have a wiggle animation implemented in two ways (using plain CSS and Angular Animations).",{"type":19,"tag":70,"props":5309,"children":5311},{"id":5310},"source-code",[5312],{"type":24,"value":5313},"Source Code",{"type":19,"tag":20,"props":5315,"children":5316},{},[5317,5319,5325,5327,5332],{"type":24,"value":5318},"Wrapping everything together - you can check the source code on\n",{"type":19,"tag":87,"props":5320,"children":5323},{"href":5321,"target":5322},"https://gitlab.com/practical-frontend-content/wiggle-animation-angular","_blank",[5324],{"type":24,"value":371},{"type":24,"value":5326},"\nor\n",{"type":19,"tag":87,"props":5328,"children":5330},{"href":5329,"target":5322},"https://github.com/OwlHowl3/wiggle-animation-angular",[5331],{"type":24,"value":364},{"type":24,"value":5333},".\nFor a live demo you can check the Stackblitz project below.",{"type":19,"tag":321,"props":5335,"children":5336},{},[5337],{"type":24,"value":325},{"title":7,"searchDepth":27,"depth":27,"links":5339},[5340,5341,5342,5343,5344,5345],{"id":716,"depth":331,"text":719},{"id":2030,"depth":331,"text":2033},{"id":2546,"depth":331,"text":2549},{"id":2968,"depth":331,"text":2971},{"id":4474,"depth":331,"text":4477},{"id":5310,"depth":331,"text":5313},"content:articles:wiggle-animation.md","articles/wiggle-animation.md",[5349,5566],{"_path":50,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":51,"description":52,"published":53,"readTime":11,"slug":54,"seriesId":13,"seriesOrder":27,"body":5350,"_type":29,"_id":337,"_source":31,"_file":338,"_extension":33},{"type":16,"children":5351,"toc":5556},[5352,5356,5360,5364,5424,5428,5479,5483,5523,5527,5531,5544,5548,5552],{"type":19,"tag":20,"props":5353,"children":5354},{},[5355],{"type":24,"value":61},{"type":19,"tag":63,"props":5357,"children":5358},{"id":65},[5359],{"type":24,"value":68},{"type":19,"tag":70,"props":5361,"children":5362},{"id":72},[5363],{"type":24,"value":75},{"type":19,"tag":77,"props":5365,"children":5366},{},[5367,5377,5396,5415],{"type":19,"tag":81,"props":5368,"children":5369},{},[5370,5371,5376],{"type":24,"value":85},{"type":19,"tag":87,"props":5372,"children":5374},{"href":89,"rel":5373},[91],[5375],{"type":24,"value":94},{"type":24,"value":96},{"type":19,"tag":81,"props":5378,"children":5379},{},[5380,5381,5385,5386,5390,5391,5395],{"type":24,"value":101},{"type":19,"tag":103,"props":5382,"children":5383},{},[5384],{"type":24,"value":107},{"type":24,"value":109},{"type":19,"tag":103,"props":5387,"children":5388},{},[5389],{"type":24,"value":114},{"type":24,"value":109},{"type":19,"tag":103,"props":5392,"children":5393},{},[5394],{"type":24,"value":120},{"type":24,"value":96},{"type":19,"tag":81,"props":5397,"children":5398},{},[5399,5400],{"type":24,"value":126},{"type":19,"tag":128,"props":5401,"children":5402},{},[5403,5407,5411],{"type":19,"tag":81,"props":5404,"children":5405},{},[5406],{"type":24,"value":135},{"type":19,"tag":81,"props":5408,"children":5409},{},[5410],{"type":24,"value":140},{"type":19,"tag":81,"props":5412,"children":5413},{},[5414],{"type":24,"value":145},{"type":19,"tag":81,"props":5416,"children":5417},{},[5418,5419,5423],{"type":24,"value":150},{"type":19,"tag":103,"props":5420,"children":5421},{},[5422],{"type":24,"value":155},{"type":24,"value":157},{"type":19,"tag":70,"props":5425,"children":5426},{"id":160},[5427],{"type":24,"value":163},{"type":19,"tag":77,"props":5429,"children":5430},{},[5431,5441,5450,5460,5470],{"type":19,"tag":81,"props":5432,"children":5433},{},[5434,5435,5440],{"type":24,"value":85},{"type":19,"tag":87,"props":5436,"children":5438},{"href":89,"rel":5437},[91],[5439],{"type":24,"value":94},{"type":24,"value":96},{"type":19,"tag":81,"props":5442,"children":5443},{},[5444,5445,5449],{"type":24,"value":101},{"type":19,"tag":103,"props":5446,"children":5447},{},[5448],{"type":24,"value":185},{"type":24,"value":96},{"type":19,"tag":81,"props":5451,"children":5452},{},[5453,5454,5459],{"type":24,"value":191},{"type":19,"tag":193,"props":5455,"children":5457},{"className":5456},[],[5458],{"type":24,"value":198},{"type":24,"value":200},{"type":19,"tag":81,"props":5461,"children":5462},{},[5463,5464,5469],{"type":24,"value":205},{"type":19,"tag":193,"props":5465,"children":5467},{"className":5466},[],[5468],{"type":24,"value":198},{"type":24,"value":212},{"type":19,"tag":81,"props":5471,"children":5472},{},[5473,5474,5478],{"type":24,"value":217},{"type":19,"tag":103,"props":5475,"children":5476},{},[5477],{"type":24,"value":155},{"type":24,"value":223},{"type":19,"tag":70,"props":5480,"children":5481},{"id":226},[5482],{"type":24,"value":229},{"type":19,"tag":231,"props":5484,"children":5485},{"className":233,"code":234,"language":235,"meta":7,"style":7},[5486],{"type":19,"tag":193,"props":5487,"children":5488},{"__ignoreMap":7},[5489,5504],{"type":19,"tag":241,"props":5490,"children":5491},{"class":243,"line":14},[5492,5496,5500],{"type":19,"tag":241,"props":5493,"children":5494},{"style":247},[5495],{"type":24,"value":250},{"type":19,"tag":241,"props":5497,"children":5498},{"style":253},[5499],{"type":24,"value":256},{"type":19,"tag":241,"props":5501,"children":5502},{"style":253},[5503],{"type":24,"value":261},{"type":19,"tag":241,"props":5505,"children":5506},{"class":243,"line":27},[5507,5511,5515,5519],{"type":19,"tag":241,"props":5508,"children":5509},{"style":247},[5510],{"type":24,"value":250},{"type":19,"tag":241,"props":5512,"children":5513},{"style":253},[5514],{"type":24,"value":256},{"type":19,"tag":241,"props":5516,"children":5517},{"style":253},[5518],{"type":24,"value":277},{"type":19,"tag":241,"props":5520,"children":5521},{"style":253},[5522],{"type":24,"value":282},{"type":19,"tag":70,"props":5524,"children":5525},{"id":285},[5526],{"type":24,"value":288},{"type":19,"tag":20,"props":5528,"children":5529},{},[5530],{"type":24,"value":293},{"type":19,"tag":231,"props":5532,"children":5533},{"className":233,"code":296,"language":235,"meta":7,"style":7},[5534],{"type":19,"tag":193,"props":5535,"children":5536},{"__ignoreMap":7},[5537],{"type":19,"tag":241,"props":5538,"children":5539},{"class":243,"line":14},[5540],{"type":19,"tag":241,"props":5541,"children":5542},{"style":247},[5543],{"type":24,"value":296},{"type":19,"tag":63,"props":5545,"children":5546},{"id":310},[5547],{"type":24,"value":313},{"type":19,"tag":63,"props":5549,"children":5550},{"id":316},[5551],{"type":24,"value":319},{"type":19,"tag":321,"props":5553,"children":5554},{},[5555],{"type":24,"value":325},{"title":7,"searchDepth":27,"depth":27,"links":5557},[5558,5564,5565],{"id":65,"depth":27,"text":68,"children":5559},[5560,5561,5562,5563],{"id":72,"depth":331,"text":75},{"id":160,"depth":331,"text":163},{"id":226,"depth":331,"text":229},{"id":285,"depth":331,"text":288},{"id":310,"depth":27,"text":313},{"id":316,"depth":27,"text":319},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"published":10,"readTime":11,"slug":12,"seriesId":13,"seriesOrder":14,"body":5567,"_type":29,"_id":30,"_source":31,"_file":32,"_extension":33},{"type":16,"children":5568,"toc":5573},[5569],{"type":19,"tag":20,"props":5570,"children":5571},{},[5572],{"type":24,"value":25},{"title":7,"searchDepth":27,"depth":27,"links":5574},[],1757847787733]