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