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