{"id":71813,"date":"2020-01-10T17:00:00","date_gmt":"2020-01-10T11:30:00","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=71813"},"modified":"2024-04-12T14:22:44","modified_gmt":"2024-04-12T08:52:44","slug":"animation-setup","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/animation-setup\/","title":{"rendered":"Animation Setup"},"content":{"rendered":"\n

Go back to Tutorial<\/a><\/p>\n\n\n

Before you can add animations to your application, you need to import a few animation-specific modules and functions to the root application module.<\/p>\n

app.module.ts (animation module import excerpt)<\/u><\/p>\n

import { BrowserModule } from ‘@angular\/platform-browser’;<\/p>\n

import { BrowserAnimationsModule } from ‘@angular\/platform-browser\/animations’;<\/p>\n

@NgModule({<\/p>\n

imports: [ BrowserModule, BrowserAnimationsModule ],<\/p>\n

\/\/ … more stuff …<\/p>\n

})<\/p>\n

export class AppModule { }<\/p>\n

Example basics<\/strong><\/p>\n

The animations examples in this guide animate a list of heroes.<\/p>\n

A Hero class has a name property, a state property that indicates if the hero is active or not, and a toggleState() method to switch between the states.<\/p>\n

hero.service.ts (Hero class)<\/u><\/p>\n

export class Hero {<\/p>\n

constructor(public name: string, public state = ‘inactive’) { }<\/p>\n

toggleState() {<\/p>\n

this.state = this.state === ‘active’ ? ‘inactive’ : ‘active’;<\/p>\n

}<\/p>\n

}<\/p>\n

Across the top of the screen (app.hero-team-builder.component.ts) are a series of buttons that add and remove heroes from the list (via the HeroService). The buttons trigger changes to the list that all of the example components see at the same time.<\/p>\n\n\n

Go back to Tutorial<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Go back to Tutorial Before you can add animations to your application, you need to import a few animation-specific modules and functions to the root application module. app.module.ts (animation module import excerpt) import { BrowserModule } from ‘@angular\/platform-browser’; import { BrowserAnimationsModule } from ‘@angular\/platform-browser\/animations’; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule ], \/\/ … more stuff ……<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8294],"tags":[8370],"class_list":["post-71813","page","type-page","status-publish","hentry","category-angular-7","tag-animation-setup"],"acf":[],"yoast_head":"\nAnimation Setup - Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/animation-setup\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animation Setup - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Go back to Tutorial Before you can add animations to your application, you need to import a few animation-specific modules and functions to the root application module. app.module.ts (animation module import excerpt) import { BrowserModule } from ‘@angular\/platform-browser’; import { BrowserAnimationsModule } from ‘@angular\/platform-browser\/animations’; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule ], \/\/ … more stuff …...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/animation-setup\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:52:44+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/animation-setup\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/animation-setup\/\",\"name\":\"Animation Setup - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2020-01-10T11:30:00+00:00\",\"dateModified\":\"2024-04-12T08:52:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/animation-setup\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/animation-setup\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/animation-setup\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animation Setup\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animation Setup - Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/animation-setup\/","og_locale":"en_US","og_type":"article","og_title":"Animation Setup - Tutorial","og_description":"Go back to Tutorial Before you can add animations to your application, you need to import a few animation-specific modules and functions to the root application module. app.module.ts (animation module import excerpt) import { BrowserModule } from ‘@angular\/platform-browser’; import { BrowserAnimationsModule } from ‘@angular\/platform-browser\/animations’; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule ], \/\/ … more stuff …...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/animation-setup\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:52:44+00:00","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/animation-setup\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/animation-setup\/","name":"Animation Setup - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2020-01-10T11:30:00+00:00","dateModified":"2024-04-12T08:52:44+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/animation-setup\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/animation-setup\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/animation-setup\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Animation Setup"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=71813"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71813\/revisions"}],"predecessor-version":[{"id":87900,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71813\/revisions\/87900"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=71813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=71813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=71813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}