title
Learn Angular 5 in less than 60 Minutes - Free Beginner's Course

description
Full course with written lessons: https://goo.gl/844NSz SUBSCRIBE If you enjoyed this! https://coursetro.com for more Angular In this 100% free crash course, you will learn how to get up and running with Angular 5, along with understanding all of the fundamentals that are necessary to get started with this awesome Javascript framework. This course is split up into 8 sections: 1. Installing Angular https://coursetro.com/posts/code/105/How-to-Install-Angular-5-(Tutorial) 2. Components https://coursetro.com/posts/code/106/Angular-5-Components-Tutorial 3. Templating & Styling (7:14) https://coursetro.com/posts/code/107/Angular-5-Template-&-Styling-Tutorial 4. Interpolation, Property & Event Binding (9:46) https://coursetro.com/posts/code/108/Angular-5-Interpolation,-Property-Binding-&-Event-Binding-Tutorial 5. Animation (11:14) https://coursetro.com/posts/code/109/Angular-5-Animation-Tutorial 6. Routing (7:16) https://coursetro.com/posts/code/111/Using-the-Angular-5-Router-(Tutorial) 7. Services (7:12) https://coursetro.com/posts/code/110/Creating-and-Using-Angular-5-Services 8. App Deployment (6:33) https://coursetro.com/posts/code/112/Angular-5-Deployment---Deploy-your-Angular-App Enjoy! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': "Learn Angular 5 in less than 60 Minutes - Free Beginner's Course", 'heatmap': [{'end': 212.363, 'start': 103.52, 'weight': 0.789}, {'end': 568.138, 'start': 492.236, 'weight': 0.879}, {'end': 1338.567, 'start': 1292.33, 'weight': 0.748}, {'end': 2430.88, 'start': 2355.278, 'weight': 0.891}, {'end': 2676.69, 'start': 2636.013, 'weight': 0.735}, {'end': 2924.63, 'start': 2845.301, 'weight': 0.973}], 'summary': 'In this tutorial, you will learn how to install angular 5 prerequisites, set up angular 5 in less than 60 seconds, understand data binding, event handling, animations, routing, navigation, sharing data between components using rxjs behavior subject, and deploying an angular 5 application with an 89% reduction in file size.', 'chapters': [{'end': 44.067, 'segs': [{'end': 44.067, 'src': 'embed', 'start': 8.257, 'weight': 0, 'content': [{'end': 8.677, 'text': 'All right.', 'start': 8.257, 'duration': 0.42}, {'end': 17.46, 'text': "so to get started with installing Angular 5, you're going to need a couple prerequisites, and that is Node.js with the Node Package Manager,", 'start': 8.677, 'duration': 8.783}, {'end': 18.881, 'text': 'otherwise known as the NPM.', 'start': 17.46, 'duration': 1.421}, {'end': 25.423, 'text': "Now. the reason we need this is because we're going to use it to install the Angular Command Line Interface or CLI,", 'start': 19.221, 'duration': 6.202}, {'end': 28.864, 'text': 'to help us get started installing a new Angular 5 project.', 'start': 25.423, 'duration': 3.441}, {'end': 33.936, 'text': 'Oh, but real quick, before we begin, make sure you check out my site, courseetro.com,', 'start': 29.571, 'duration': 4.365}, {'end': 37.901, 'text': "where you're going to find a bunch of courses on modern design and development.", 'start': 33.936, 'duration': 3.965}, {'end': 43.567, 'text': 'A lot are free and the others you can access for the cost of buying me like a six pack each month.', 'start': 38.361, 'duration': 5.206}, {'end': 44.067, 'text': "That's it.", 'start': 43.747, 'duration': 0.32}], 'summary': 'Install angular 5 using node.js and npm, access courses on courseetro.com.', 'duration': 35.81, 'max_score': 8.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP88257.jpg'}], 'start': 8.257, 'title': 'Installing angular 5 prerequisites', 'summary': 'Explains the prerequisites for installing angular 5, including node.js and npm, and highlights the use of angular cli for creating new projects. a promotional mention for courses on courseetro.com is included.', 'chapters': [{'end': 44.067, 'start': 8.257, 'title': 'Installing angular 5 prerequisites', 'summary': 'Explains the prerequisites needed for installing angular 5, including node.js and npm, and emphasizes the use of angular cli for creating new projects. additionally, a promotional mention for courses on courseetro.com is made.', 'duration': 35.81, 'highlights': ['Node.js and NPM are required as prerequisites for installing Angular 5.', 'The Angular Command Line Interface (CLI) is used for setting up new Angular 5 projects.', 'Promotion of courses available on courseetro.com is mentioned, with options for free access and paid subscription.']}], 'duration': 35.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP88257.jpg', 'highlights': ['The Angular Command Line Interface (CLI) is used for setting up new Angular 5 projects.', 'Node.js and NPM are required as prerequisites for installing Angular 5.', 'Promotion of courses available on courseetro.com is mentioned, with options for free access and paid subscription.']}, {'end': 613.131, 'segs': [{'end': 114.566, 'src': 'embed', 'start': 87.216, 'weight': 2, 'content': [{'end': 92.786, 'text': "and then reload your console and then rerun these and you'll find that they provide you with version numbers.", 'start': 87.216, 'duration': 5.57}, {'end': 98.555, 'text': "Okay, so now we're going to install Angular 5, like I mentioned, through the command line interface.", 'start': 93.387, 'duration': 5.168}, {'end': 103.44, 'text': "All right, so what we'll do is first we have to install it.", 'start': 99.056, 'duration': 4.384}, {'end': 114.566, 'text': 'So npm install at angular forward slash CLI, and then add the hyphen G for global flag, and that will install it on your machine as a whole.', 'start': 103.52, 'duration': 11.046}], 'summary': "Install angular 5 globally using 'npm install @angular/cli -g'.", 'duration': 27.35, 'max_score': 87.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP887216.jpg'}, {'end': 212.363, 'src': 'heatmap', 'start': 103.52, 'weight': 0.789, 'content': [{'end': 114.566, 'text': 'So npm install at angular forward slash CLI, and then add the hyphen G for global flag, and that will install it on your machine as a whole.', 'start': 103.52, 'duration': 11.046}, {'end': 116.707, 'text': 'So if you hit enter, it will install it.', 'start': 114.666, 'duration': 2.041}, {'end': 119.949, 'text': "And I've already had it installed, so I don't need to do that.", 'start': 117.488, 'duration': 2.461}, {'end': 125.352, 'text': "And once it's done installing, just type in mpg-v.", 'start': 120.61, 'duration': 4.742}, {'end': 128.411, 'text': 'All right.', 'start': 128.191, 'duration': 0.22}, {'end': 130.732, 'text': 'And that will give you the current version number right here.', 'start': 128.471, 'duration': 2.261}, {'end': 135.594, 'text': 'Okay, So to get started to create a new project.', 'start': 131.552, 'duration': 4.042}, {'end': 140.916, 'text': "by the way, before I get there, if you just type in NG, it's going to give you a ton of options that you can use.", 'start': 135.594, 'duration': 5.322}, {'end': 144.678, 'text': "So we're going to start a new project now.", 'start': 143.157, 'duration': 1.521}, {'end': 146.538, 'text': 'NG new.', 'start': 145.758, 'duration': 0.78}, {'end': 150.4, 'text': 'Oh, by the way, make sure you hop into your code folder if you have one.', 'start': 146.558, 'duration': 3.842}, {'end': 157.183, 'text': "All right, ng new, I'm gonna call this ng five for the name of the project.", 'start': 151.721, 'duration': 5.462}, {'end': 164.886, 'text': "I'm also going to specify a style flag equals SCSS for SAS.", 'start': 157.823, 'duration': 7.063}, {'end': 171.628, 'text': 'And then also we want routing to be integrated and set up for us by default.', 'start': 165.306, 'duration': 6.322}, {'end': 178.551, 'text': "So once we do this, it will run through for a little bit and I'm just gonna pause until it's finishes.", 'start': 173.009, 'duration': 5.542}, {'end': 185.355, 'text': "Really, it doesn't take more than 30 to 60 seconds All right, so now it's finished.", 'start': 178.591, 'duration': 6.764}, {'end': 188.216, 'text': 'Now all we have to do is cd or hop into it.', 'start': 185.695, 'duration': 2.521}, {'end': 191.076, 'text': 'So cd and then the folder name ng5.', 'start': 188.456, 'duration': 2.62}, {'end': 194.738, 'text': 'And now we can run ng serve.', 'start': 192.897, 'duration': 1.841}, {'end': 201.64, 'text': 'And it will take just a little bit of time while it builds out the project.', 'start': 198.319, 'duration': 3.321}, {'end': 208.062, 'text': 'And notice it says localhost 4200 is where the dev server will be accessible.', 'start': 202.66, 'duration': 5.402}, {'end': 212.363, 'text': 'And I will bring up a new browser window to get there.', 'start': 209.302, 'duration': 3.061}], 'summary': 'Installing angular cli globally and creating a new project with routing took less than 60 seconds.', 'duration': 108.843, 'max_score': 103.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP8103520.jpg'}, {'end': 164.886, 'src': 'embed', 'start': 131.552, 'weight': 0, 'content': [{'end': 135.594, 'text': 'Okay, So to get started to create a new project.', 'start': 131.552, 'duration': 4.042}, {'end': 140.916, 'text': "by the way, before I get there, if you just type in NG, it's going to give you a ton of options that you can use.", 'start': 135.594, 'duration': 5.322}, {'end': 144.678, 'text': "So we're going to start a new project now.", 'start': 143.157, 'duration': 1.521}, {'end': 146.538, 'text': 'NG new.', 'start': 145.758, 'duration': 0.78}, {'end': 150.4, 'text': 'Oh, by the way, make sure you hop into your code folder if you have one.', 'start': 146.558, 'duration': 3.842}, {'end': 157.183, 'text': "All right, ng new, I'm gonna call this ng five for the name of the project.", 'start': 151.721, 'duration': 5.462}, {'end': 164.886, 'text': "I'm also going to specify a style flag equals SCSS for SAS.", 'start': 157.823, 'duration': 7.063}], 'summary': 'Creating a new project using ng command with scss style specified.', 'duration': 33.334, 'max_score': 131.552, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP8131552.jpg'}, {'end': 389.593, 'src': 'embed', 'start': 361.13, 'weight': 3, 'content': [{'end': 363.992, 'text': "We want to leave this up so we don't have to keep on running that command.", 'start': 361.13, 'duration': 2.862}, {'end': 366.613, 'text': "So I'm going to open up a new console.", 'start': 364.192, 'duration': 2.421}, {'end': 373.836, 'text': 'All right.', 'start': 373.536, 'duration': 0.3}, {'end': 378.158, 'text': 'And the way we generate a new component, very simple.', 'start': 374.436, 'duration': 3.722}, {'end': 382.84, 'text': "So what we'll do is type in ng generate.", 'start': 378.678, 'duration': 4.162}, {'end': 385.821, 'text': 'And what is it that we want to generate? Well, a component.', 'start': 383.62, 'duration': 2.201}, {'end': 389.593, 'text': "and we're gonna name it home.", 'start': 387.512, 'duration': 2.081}], 'summary': "Demonstrating how to generate a new component named 'home' using 'ng generate' command.", 'duration': 28.463, 'max_score': 361.13, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP8361130.jpg'}, {'end': 568.138, 'src': 'heatmap', 'start': 492.236, 'weight': 0.879, 'content': [{'end': 493.037, 'text': "So we'll say home.", 'start': 492.236, 'duration': 0.801}, {'end': 497.962, 'text': "We'll get to that by the way in the routing lesson.", 'start': 494.058, 'duration': 3.904}, {'end': 504.37, 'text': "I'm gonna change this to about, and this will be about.", 'start': 497.983, 'duration': 6.387}, {'end': 505.635, 'text': 'All right.', 'start': 505.435, 'duration': 0.2}, {'end': 507.796, 'text': 'So the way we actually nest a component.', 'start': 505.675, 'duration': 2.121}, {'end': 517.482, 'text': "if I come over here real quickly and we go to about and we look at the about component, we'll see the selector is app hyphen about.", 'start': 507.796, 'duration': 9.686}, {'end': 526.527, 'text': 'So the way we nest it is if we go back to our app component, we simply put in app hyphen home.', 'start': 518.763, 'duration': 7.764}, {'end': 528.605, 'text': 'Just like that.', 'start': 528.044, 'duration': 0.561}, {'end': 530.987, 'text': "And you'll see the same pattern.", 'start': 529.245, 'duration': 1.742}, {'end': 534.872, 'text': 'If we go to our app component, this is called app root.', 'start': 531.128, 'duration': 3.744}, {'end': 539.737, 'text': "Well, there's also an index.html and we can see app root right here.", 'start': 535.393, 'duration': 4.344}, {'end': 541.64, 'text': 'All right.', 'start': 539.758, 'duration': 1.882}, {'end': 546.165, 'text': "So let's go ahead back and just save whatever we need to save here.", 'start': 541.7, 'duration': 4.465}, {'end': 548.232, 'text': 'All right, great.', 'start': 547.691, 'duration': 0.541}, {'end': 556.259, 'text': "So that is the very basics of how components work and how they're structured and how you can nest them.", 'start': 548.972, 'duration': 7.287}, {'end': 561.925, 'text': "In the next section, we're gonna take a look at templating and styling in our Angular 5 app.", 'start': 556.74, 'duration': 5.185}, {'end': 568.138, 'text': 'Hey everyone, Gary Simon, of course, Cetro.', 'start': 566.035, 'duration': 2.103}], 'summary': 'Basic lesson on nesting components and structuring in angular 5 app.', 'duration': 75.902, 'max_score': 492.236, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP8492236.jpg'}, {'end': 561.925, 'src': 'embed', 'start': 507.796, 'weight': 1, 'content': [{'end': 517.482, 'text': "if I come over here real quickly and we go to about and we look at the about component, we'll see the selector is app hyphen about.", 'start': 507.796, 'duration': 9.686}, {'end': 526.527, 'text': 'So the way we nest it is if we go back to our app component, we simply put in app hyphen home.', 'start': 518.763, 'duration': 7.764}, {'end': 528.605, 'text': 'Just like that.', 'start': 528.044, 'duration': 0.561}, {'end': 530.987, 'text': "And you'll see the same pattern.", 'start': 529.245, 'duration': 1.742}, {'end': 534.872, 'text': 'If we go to our app component, this is called app root.', 'start': 531.128, 'duration': 3.744}, {'end': 539.737, 'text': "Well, there's also an index.html and we can see app root right here.", 'start': 535.393, 'duration': 4.344}, {'end': 541.64, 'text': 'All right.', 'start': 539.758, 'duration': 1.882}, {'end': 546.165, 'text': "So let's go ahead back and just save whatever we need to save here.", 'start': 541.7, 'duration': 4.465}, {'end': 548.232, 'text': 'All right, great.', 'start': 547.691, 'duration': 0.541}, {'end': 556.259, 'text': "So that is the very basics of how components work and how they're structured and how you can nest them.", 'start': 548.972, 'duration': 7.287}, {'end': 561.925, 'text': "In the next section, we're gonna take a look at templating and styling in our Angular 5 app.", 'start': 556.74, 'duration': 5.185}], 'summary': 'Demonstrating component nesting and structure in angular 5 app.', 'duration': 54.129, 'max_score': 507.796, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP8507796.jpg'}], 'start': 44.648, 'title': 'Installing and setting up angular 5', 'summary': 'Explains installing node.js and angular 5 through the command line interface, creating a new project with specified flags in less than 60 seconds, and setting up an angular 5 project, creating and nesting components using angular cli, and understanding the structure and nesting of components.', 'chapters': [{'end': 188.216, 'start': 44.648, 'title': 'Installing angular 5 and creating a new project', 'summary': 'Explains how to install node.js and angular 5 through the command line interface and create a new project using ng new with specified flags, taking less than 60 seconds for setup.', 'duration': 143.568, 'highlights': ['The chapter explains how to install Node.js and Angular 5 through the command line interface. Installing Node.js and Angular 5, using command line interface', 'Creating a new project using NG new with specified flags, taking less than 60 seconds for setup. Creating new project using NG new with specified flags, setup time less than 60 seconds']}, {'end': 613.131, 'start': 188.456, 'title': 'Setting up angular 5 and understanding components', 'summary': 'Covers setting up an angular 5 project, creating and nesting components using angular cli, and understanding the structure and nesting of components, laying the foundation for further exploration of templating and styling in angular 5.', 'duration': 424.675, 'highlights': ['The chapter covers setting up an Angular 5 project, creating and nesting components using Angular CLI, and understanding the structure and nesting of components, laying the foundation for further exploration of templating and styling in Angular 5. Setting up Angular 5 project, creating/nesting components using Angular CLI, understanding component structure and nesting, foundation for templating and styling exploration', "It explains the use of the Angular CLI to generate new components, demonstrating the quick and easy process of creating components named 'home' and 'about'. Explanation of using Angular CLI to generate components, demonstration of creating 'home' and 'about' components", "The process of nesting a component within another is demonstrated, with an example of nesting the 'home' component into the base 'app' component using the component selector. Demonstration of nesting a component within another, example of nesting 'home' component into 'app' component using selector"]}], 'duration': 568.483, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP844648.jpg', 'highlights': ['Creating a new project using NG new with specified flags, setup time less than 60 seconds', 'Setting up Angular 5 project, creating/nesting components using Angular CLI, understanding component structure and nesting, foundation for templating and styling exploration', 'Installing Node.js and Angular 5, using command line interface', "Explanation of using Angular CLI to generate components, demonstration of creating 'home' and 'about' components", "Demonstration of nesting a component within another, example of nesting 'home' component into 'app' component using selector"]}, {'end': 1567.312, 'segs': [{'end': 1241.953, 'src': 'embed', 'start': 1209.691, 'weight': 0, 'content': [{'end': 1212.993, 'text': 'So, going back to our project here,', 'start': 1209.691, 'duration': 3.302}, {'end': 1222.259, 'text': 'what if we wanted to use our input text field right here to both retrieve and set its value from a component class?', 'start': 1212.993, 'duration': 9.266}, {'end': 1227.182, 'text': "Well, we can use what's called the NG model to create that two-way data binding.", 'start': 1223.26, 'duration': 3.922}, {'end': 1233.466, 'text': 'So in order for this to work and have access to NG model, we have to import the forms module.', 'start': 1227.782, 'duration': 5.684}, {'end': 1241.953, 'text': "Okay So to do that, we're going to come to our app module.ts right here, and we're going to add the following line.", 'start': 1233.886, 'duration': 8.067}], 'summary': 'Using ng model for two-way data binding in angular forms', 'duration': 32.262, 'max_score': 1209.691, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP81209691.jpg'}, {'end': 1338.567, 'src': 'heatmap', 'start': 1292.33, 'weight': 0.748, 'content': [{'end': 1301.177, 'text': 'And the way you set up the two-way data binding is by specifying a bracket and then inside of the brackets are the parentheses.', 'start': 1292.33, 'duration': 8.847}, {'end': 1308.302, 'text': 'ngModel equals GoalText.', 'start': 1301.177, 'duration': 7.125}, {'end': 1321.412, 'text': "Now let's also just temporarily underneath it, we'll add a br and a span, and we're going to put in the GoalText through interpolation.", 'start': 1309.983, 'duration': 11.429}, {'end': 1323.343, 'text': "So let's save that.", 'start': 1322.383, 'duration': 0.96}, {'end': 1329.845, 'text': 'Okay, now we could see we have my first life goal.', 'start': 1323.363, 'duration': 6.482}, {'end': 1335.306, 'text': 'This is coming from the one direction in terms of going from the component to this HTML template.', 'start': 1329.865, 'duration': 5.441}, {'end': 1338.567, 'text': "And then we can also see it's doing the same thing down here.", 'start': 1336.207, 'duration': 2.36}], 'summary': 'Setting up two-way data binding with ngmodel for goaltext.', 'duration': 46.237, 'max_score': 1292.33, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP81292330.jpg'}, {'end': 1386.442, 'src': 'embed', 'start': 1354.331, 'weight': 3, 'content': [{'end': 1356.251, 'text': "And so that's how two-way data binding works.", 'start': 1354.331, 'duration': 1.92}, {'end': 1359.232, 'text': "Now let's also talk about event binding.", 'start': 1356.892, 'duration': 2.34}, {'end': 1366.154, 'text': 'So we know how to capture user input as we just demonstrated right here and communicate it to our class.', 'start': 1359.952, 'duration': 6.202}, {'end': 1374.136, 'text': "So how can we make our add an item button actually work and save the user submitted data somewhere? So that's where event binding comes in.", 'start': 1366.454, 'duration': 7.682}, {'end': 1380.739, 'text': 'We can use event binding to capture a variety of user initiated events to initiate logic in our component class.', 'start': 1374.696, 'duration': 6.043}, {'end': 1386.442, 'text': "So Angular 5 does support a lot of different types of events, but we're going to use a click event.", 'start': 1381.34, 'duration': 5.102}], 'summary': 'Explaining two-way data binding and event binding in angular 5.', 'duration': 32.111, 'max_score': 1354.331, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP81354331.jpg'}, {'end': 1533.149, 'src': 'embed', 'start': 1499.662, 'weight': 4, 'content': [{'end': 1501.123, 'text': 'All right.', 'start': 1499.662, 'duration': 1.461}, {'end': 1502.224, 'text': 'My first life goal.', 'start': 1501.163, 'duration': 1.061}, {'end': 1505.986, 'text': 'Now you can see it says zero because we have this default one added.', 'start': 1502.824, 'duration': 3.162}, {'end': 1507.607, 'text': 'Now we could see.', 'start': 1506.967, 'duration': 0.64}, {'end': 1514.211, 'text': 'It keeps on counting as we add new items.', 'start': 1509.628, 'duration': 4.583}, {'end': 1518.194, 'text': "Now it's not getting shown here because we haven't actually coded for that.", 'start': 1514.592, 'duration': 3.602}, {'end': 1525.119, 'text': "So what we want to do is use what's called ng4 to iterate through this array in the template.", 'start': 1518.875, 'duration': 6.244}, {'end': 1527.861, 'text': "Okay So let's go back to our template.", 'start': 1525.819, 'duration': 2.042}, {'end': 1533.149, 'text': "And where it says, I want to climb a mountain, we'll get rid of that.", 'start': 1530.007, 'duration': 3.142}], 'summary': 'Setting life goal progress with ng4, currently at zero.', 'duration': 33.487, 'max_score': 1499.662, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP81499662.jpg'}], 'start': 613.131, 'title': 'Angular data binding and event handling', 'summary': 'Covers property and event binding, interpolation, two-way data binding using ng model in angular, and event handling in angular. it discusses the necessity of importing the forms module, and setting up two-way data binding for user input.', 'chapters': [{'end': 981.307, 'start': 613.131, 'title': 'Styling html and css basics', 'summary': 'Covers adding multi-line html and basic css for a home component, including defining layout using css grid and adding global styles for all templates.', 'duration': 368.176, 'highlights': ['Defining layout using CSS grid for the container and styling inputs to make them look better. The chapter demonstrates using the new display property of CSS grid to define the layout and styling inputs for a better appearance.', 'Adding global styles for all templates, including importing a Google font and setting up basic rule sets for the body and unordered list. The transcript discusses the addition of global styles for all templates, featuring the import of a Google font, setting up basic rule sets for the body and unordered list.', 'Demonstrating the use of backticks for inline CSS and the option to define CSS files associated with the component. The chapter showcases the use of backticks for inline CSS and the option to define CSS files associated with the component, providing flexibility in styling.']}, {'end': 1261.769, 'start': 983.666, 'title': 'Angular data binding', 'summary': 'Covers property and event binding, interpolation, and two-way data binding using ng model in angular. it discusses how to display values through interpolation, control button text using property binding, and enable two-way data binding with ng model, as well as the necessity of importing the forms module for this purpose.', 'duration': 278.103, 'highlights': ['The chapter covers property and event binding, interpolation, and two-way data binding using NG model in Angular. Covers the main topics of the chapter.', 'It discusses how to display values through interpolation. Demonstrates the use of interpolation to display property values in the template.', 'Control button text using property binding. Explains how to use property binding to control the text value of a button.', 'Enables two-way data binding with NG model. Describes the use of NG model to create two-way data binding for input fields.', 'Necessity of importing the forms module for this purpose. Highlights the requirement of importing the forms module to utilize NG model for two-way data binding.']}, {'end': 1567.312, 'start': 1263.268, 'title': 'Angular data binding and event handling', 'summary': 'Covers the implementation of two-way data binding and event handling in angular, including setting up two-way data binding for user input, capturing user initiated events using event binding, and using ngfor to iterate through an array in the template.', 'duration': 304.044, 'highlights': ['Setting up two-way data binding for user input The chapter demonstrates the process of setting up two-way data binding by specifying ngModel and using interpolation to display the input in the HTML template.', 'Capturing user initiated events using event binding The chapter explains the use of event binding to capture user initiated events, specifically using the click event to call a method and save user submitted data in the component class.', 'Using ngFor to iterate through an array in the template The chapter showcases the use of ngFor to iterate through an array in the template, allowing for dynamic display and manipulation of the array elements.']}], 'duration': 954.181, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP8613131.jpg', 'highlights': ['Covers property and event binding, interpolation, and two-way data binding using NG model in Angular. Covers the main topics of the chapter.', 'Necessity of importing the forms module for this purpose. Highlights the requirement of importing the forms module to utilize NG model for two-way data binding.', 'Setting up two-way data binding for user input The chapter demonstrates the process of setting up two-way data binding by specifying ngModel and using interpolation to display the input in the HTML template.', 'Capturing user initiated events using event binding The chapter explains the use of event binding to capture user initiated events, specifically using the click event to call a method and save user submitted data in the component class.', 'Using ngFor to iterate through an array in the template The chapter showcases the use of ngFor to iterate through an array in the template, allowing for dynamic display and manipulation of the array elements.']}, {'end': 2213.786, 'segs': [{'end': 1712.686, 'src': 'embed', 'start': 1567.493, 'weight': 0, 'content': [{'end': 1572.216, 'text': 'Obviously not much functionality at this point, but going forward.', 'start': 1567.493, 'duration': 4.723}, {'end': 1579.841, 'text': "we're going to take now a look at animation in Angular 5 and see what it would take to animate these in and out.", 'start': 1572.216, 'duration': 7.625}, {'end': 1581.262, 'text': "All right, I'll see you then.", 'start': 1580.461, 'duration': 0.801}, {'end': 1587.767, 'text': 'Hey everyone, Gary Simon of Coursetro.', 'start': 1585.745, 'duration': 2.022}, {'end': 1594.712, 'text': "Let's go ahead and take a look at Angular 5 animation by continuing on with the project that we've been working on throughout this course.", 'start': 1587.847, 'duration': 6.865}, {'end': 1600.517, 'text': 'So it would be really cool, for instance, if we could animate each one of these items as they get added.', 'start': 1595.273, 'duration': 5.244}, {'end': 1606.382, 'text': "So if I add a new life goal, we could see there's no animation that really takes place.", 'start': 1600.937, 'duration': 5.445}, {'end': 1618.694, 'text': 'So to get started with Angular animation in Angular 5, we have to go to our console and we have to install or import the angular animations library.', 'start': 1607.062, 'duration': 11.632}, {'end': 1623.141, 'text': 'So NPM install angular animations.', 'start': 1618.774, 'duration': 4.367}, {'end': 1627.588, 'text': "We'll see at latest, and then we'll save it as a development dependency.", 'start': 1623.301, 'duration': 4.287}, {'end': 1631.184, 'text': 'So this will take just a little bit of time.', 'start': 1629.423, 'duration': 1.761}, {'end': 1639.907, 'text': 'Okay, now if this issue happens with you, where it says operation not permitted, what we can do is open up a new commander window or your console.', 'start': 1631.204, 'duration': 8.703}, {'end': 1649.35, 'text': "run it as administrator ng5, npm install at angular animations at latest and we'll save it.", 'start': 1639.907, 'duration': 9.443}, {'end': 1651.171, 'text': 'All right, great, it worked this time.', 'start': 1649.89, 'duration': 1.281}, {'end': 1654.854, 'text': "So let's go ahead and go back to our project.", 'start': 1651.591, 'duration': 3.263}, {'end': 1657.676, 'text': 'And we have to go to the app module because we just installed it.', 'start': 1654.894, 'duration': 2.782}, {'end': 1660.838, 'text': 'However, we need to add it to our module here.', 'start': 1657.736, 'duration': 3.102}, {'end': 1664.101, 'text': 'So the way we do that is we add a import.', 'start': 1661.319, 'duration': 2.782}, {'end': 1673.248, 'text': "So it's import browser animations module from the Angular platform browser animations library.", 'start': 1666.302, 'duration': 6.946}, {'end': 1677.271, 'text': 'And then we take this and we add it as an import.', 'start': 1673.888, 'duration': 3.383}, {'end': 1680.233, 'text': "All right, so we'll save that.", 'start': 1677.291, 'duration': 2.942}, {'end': 1689.678, 'text': 'Now we want to actually import the animation to the given component from which we want to add the animations to.', 'start': 1681.553, 'duration': 8.125}, {'end': 1701.706, 'text': "So we go to our home component and up here, just under our first import, we're going to import a number of animation specific functions.", 'start': 1689.798, 'duration': 11.908}, {'end': 1712.686, 'text': "So we're going to import trigger, style, transition, animate keyframes, query, and stagger from Angular animations.", 'start': 1703.058, 'duration': 9.628}], 'summary': 'Introduction to angular 5 animation, including installation of angular animations library and importing animation functions for a specific component.', 'duration': 145.193, 'max_score': 1567.493, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP81567493.jpg'}, {'end': 2147.838, 'src': 'embed', 'start': 2112.985, 'weight': 7, 'content': [{'end': 2124.249, 'text': "so what we'll do is right where we have let go of goals right after we're going to put in on click Remove item.", 'start': 2112.985, 'duration': 11.264}, {'end': 2127.15, 'text': "We're going to pass in an index of called I.", 'start': 2124.57, 'duration': 2.58}, {'end': 2128.311, 'text': 'So we have to update this.', 'start': 2127.15, 'duration': 1.161}, {'end': 2131.212, 'text': 'Let I equal index.', 'start': 2129.551, 'duration': 1.661}, {'end': 2134.273, 'text': 'All right.', 'start': 2133.993, 'duration': 0.28}, {'end': 2135.493, 'text': "So we'll save that.", 'start': 2134.673, 'duration': 0.82}, {'end': 2140.255, 'text': "Oops I'm going to make sure I didn't put a closing quote there.", 'start': 2135.514, 'duration': 4.741}, {'end': 2147.838, 'text': "We're going to go back to our home component and now we have to define that remove item method.", 'start': 2140.775, 'duration': 7.063}], 'summary': 'Adding a remove item method by passing an index for updating the component', 'duration': 34.853, 'max_score': 2112.985, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP82112985.jpg'}], 'start': 1567.493, 'title': 'Angular 5 animation', 'summary': 'Covers basics of implementing animation in angular 5, including installing angular animations library, adding browser animations, and implementing stagger and multi-step animations with practical demonstrations, including a 300 milliseconds delay.', 'chapters': [{'end': 1651.171, 'start': 1567.493, 'title': 'Angular 5 animation', 'summary': 'Covers the basics of implementing animation in angular 5, including the process of installing the angular animations library and its potential applications, with a mention of npm installation and the need to run as administrator.', 'duration': 83.678, 'highlights': ["The process of installing the Angular animations library is crucial for implementing animation in Angular 5, and it involves running 'NPM install angular animations' as a development dependency.", "The need to run the installation command as an administrator, mentioned in the event of encountering the 'operation not permitted' issue, is also highlighted.", 'The demonstration includes a practical example of animating the items as they get added, emphasizing the potential applications of Angular 5 animation.']}, {'end': 1967.926, 'start': 1651.591, 'title': 'Adding browser animations to angular module', 'summary': 'Demonstrates how to add browser animations to an angular module, import animation specific functions, and set up an animation using trigger, style, transition, animate keyframes, query, and stagger, with a focus on creating a staggering animation with a 300 milliseconds delay.', 'duration': 316.335, 'highlights': ['The chapter demonstrates how to add browser animations to an Angular module, import animation specific functions, and set up an animation using trigger, style, transition, animate keyframes, query, and stagger, with a focus on creating a staggering animation with a 300 milliseconds delay.', 'The process involves importing browser animations module from the Angular platform browser animations library and adding it as an import to the module.', 'The chapter explains how to import animation specific functions such as trigger, style, transition, animate keyframes, query, and stagger from Angular animations to the given component.', 'It details setting up an animation within the component decorator as another property called animations, with the first animation specific function used to set up an animation called trigger.', 'The chapter explains the process of specifying a transition using the transition function and utilizing query to define animation behaviors when elements enter the DOM, including setting styles and staggering animations with a 300 milliseconds delay.']}, {'end': 2213.786, 'start': 1968.026, 'title': 'Angular animation implementation', 'summary': 'Covers the implementation of stagger and multi-step animations in angular, along with adding and removing elements with event binding and splice method in the context of a home component, showcasing a practical demonstration.', 'duration': 245.76, 'highlights': ['The chapter covers the implementation of stagger and multi-step animations in Angular. The demonstration includes the implementation of stagger and multi-step animations in Angular, showcasing the practical application of these animation techniques.', 'Adding and removing elements with event binding and splice method in the context of a home component. The chapter explains the process of adding and removing elements using event binding and the splice method within the context of a home component, providing a practical demonstration.', 'Practical demonstration of angular animation implementation. The transcript provides a practical demonstration of angular animation implementation, offering insights into the practical application of animation techniques within the Angular framework.']}], 'duration': 646.293, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP81567493.jpg', 'highlights': ['The demonstration includes a practical example of animating the items as they get added, emphasizing the potential applications of Angular 5 animation.', "The need to run the installation command as an administrator, mentioned in the event of encountering the 'operation not permitted' issue, is also highlighted.", "The process of installing the Angular animations library is crucial for implementing animation in Angular 5, and it involves running 'NPM install angular animations' as a development dependency.", 'The chapter demonstrates how to add browser animations to an Angular module, import animation specific functions, and set up an animation using trigger, style, transition, animate keyframes, query, and stagger, with a focus on creating a staggering animation with a 300 milliseconds delay.', 'The process involves importing browser animations module from the Angular platform browser animations library and adding it as an import to the module.', 'The chapter explains how to import animation specific functions such as trigger, style, transition, animate keyframes, query, and stagger from Angular animations to the given component.', 'The chapter covers the implementation of stagger and multi-step animations in Angular. The demonstration includes the implementation of stagger and multi-step animations in Angular, showcasing the practical application of these animation techniques.', 'Adding and removing elements with event binding and splice method in the context of a home component. The chapter explains the process of adding and removing elements using event binding and the splice method within the context of a home component, providing a practical demonstration.', 'Practical demonstration of angular animation implementation. The transcript provides a practical demonstration of angular animation implementation, offering insights into the practical application of animation techniques within the Angular framework.']}, {'end': 2699.517, 'segs': [{'end': 2243.043, 'src': 'embed', 'start': 2213.786, 'weight': 0, 'content': [{'end': 2216.908, 'text': "So we're just flipping everything essentially.", 'start': 2213.786, 'duration': 3.122}, {'end': 2218.528, 'text': "So we'll save that.", 'start': 2217.688, 'duration': 0.84}, {'end': 2222.57, 'text': 'All right.', 'start': 2222.29, 'duration': 0.28}, {'end': 2224.811, 'text': "So let's click on one and there you go.", 'start': 2222.63, 'duration': 2.181}, {'end': 2229.411, 'text': 'awesome stuff.', 'start': 2228.67, 'duration': 0.741}, {'end': 2235.076, 'text': 'So as you can see, the animation library and capabilities of Angular 5 are really, really powerful.', 'start': 2229.471, 'duration': 5.605}, {'end': 2243.043, 'text': 'And while we just kind of scratched the surface, I did kind of throw everything at you in terms of the potential capabilities of animation.', 'start': 2235.756, 'duration': 7.287}], 'summary': "Angular 5's animation library is powerful, with potential for diverse capabilities.", 'duration': 29.257, 'max_score': 2213.786, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP82213786.jpg'}, {'end': 2313.335, 'src': 'embed', 'start': 2288.493, 'weight': 1, 'content': [{'end': 2297.622, 'text': 'Okay, so when we started this project with the CLI or the command line interface tool, we added the hyphen hyphen routing flag.', 'start': 2288.493, 'duration': 9.129}, {'end': 2301.146, 'text': 'And this sets up this file right here, app routing module.', 'start': 2297.642, 'duration': 3.504}, {'end': 2306.891, 'text': 'So the first thing we have to do is import the components that we want to set up routing for.', 'start': 2301.866, 'duration': 5.025}, {'end': 2311.534, 'text': 'So in our case, we have two different components.', 'start': 2307.532, 'duration': 4.002}, {'end': 2313.335, 'text': 'We have home component.', 'start': 2311.734, 'duration': 1.601}], 'summary': 'Setting up routing for two components with cli tool', 'duration': 24.842, 'max_score': 2288.493, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP82288493.jpg'}, {'end': 2430.88, 'src': 'heatmap', 'start': 2355.278, 'weight': 0.891, 'content': [{'end': 2358.1, 'text': "Let's copy this and paste that.", 'start': 2355.278, 'duration': 2.822}, {'end': 2362.121, 'text': 'This one is going to be, the path will be in the actual address bar.', 'start': 2358.78, 'duration': 3.341}, {'end': 2366.443, 'text': 'The URL is gonna be about, and this will be about component.', 'start': 2362.181, 'duration': 4.262}, {'end': 2369.444, 'text': 'Okay, very, very simple.', 'start': 2367.443, 'duration': 2.001}, {'end': 2374.706, 'text': "So now if we actually look at the project, we're gonna see two of them.", 'start': 2369.984, 'duration': 4.722}, {'end': 2386.309, 'text': 'Well, the reason that is, is because we have to go back to our home or rather our app component, HTML, and we can get rid of this selector right here.', 'start': 2375.404, 'duration': 10.905}, {'end': 2394.133, 'text': "So now if we save this, we'll go back and yay, it works.", 'start': 2387.149, 'duration': 6.984}, {'end': 2405.947, 'text': "Awesome Okay, so let's also talk about what it takes to set and fetch Angular 5 route parameters.", 'start': 2397.623, 'duration': 8.324}, {'end': 2411.33, 'text': "So, while we don't need any type of query parameters for our particular project,", 'start': 2406.587, 'duration': 4.743}, {'end': 2418.633, 'text': "we're going to create one just so that I can show you how you can work in parameters to your URLs and retrieve the values if you need to.", 'start': 2411.33, 'duration': 7.303}, {'end': 2422.555, 'text': "So let's visit our app routing module file once again.", 'start': 2419.273, 'duration': 3.282}, {'end': 2430.88, 'text': "And right for our path for about, we're going to add forward slash ID.", 'start': 2424.276, 'duration': 6.604}], 'summary': 'Demonstrates setting and fetching angular 5 route parameters, using forward slash id', 'duration': 75.602, 'max_score': 2355.278, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP82355278.jpg'}, {'end': 2405.947, 'src': 'embed', 'start': 2369.984, 'weight': 2, 'content': [{'end': 2374.706, 'text': "So now if we actually look at the project, we're gonna see two of them.", 'start': 2369.984, 'duration': 4.722}, {'end': 2386.309, 'text': 'Well, the reason that is, is because we have to go back to our home or rather our app component, HTML, and we can get rid of this selector right here.', 'start': 2375.404, 'duration': 10.905}, {'end': 2394.133, 'text': "So now if we save this, we'll go back and yay, it works.", 'start': 2387.149, 'duration': 6.984}, {'end': 2405.947, 'text': "Awesome Okay, so let's also talk about what it takes to set and fetch Angular 5 route parameters.", 'start': 2397.623, 'duration': 8.324}], 'summary': 'The project has two parts, and angular 5 route parameters are discussed.', 'duration': 35.963, 'max_score': 2369.984, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP82369984.jpg'}, {'end': 2507.867, 'src': 'embed', 'start': 2482.412, 'weight': 4, 'content': [{'end': 2490.436, 'text': "All right, we haven't worked in here yet, but what we want to do is add in just one single import.", 'start': 2482.412, 'duration': 8.024}, {'end': 2495.324, 'text': 'And that will be activated route from the angular router library.', 'start': 2491.243, 'duration': 4.081}, {'end': 2496.164, 'text': 'All right.', 'start': 2495.344, 'duration': 0.82}, {'end': 2499.725, 'text': 'So this will give us access to the route parameters.', 'start': 2496.184, 'duration': 3.541}, {'end': 2507.867, 'text': "So next we have to create an instance of activated route, and we do that through what's called dependency injection.", 'start': 2500.445, 'duration': 7.422}], 'summary': 'Adding activated route from angular router library for route parameters.', 'duration': 25.455, 'max_score': 2482.412, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP82482412.jpg'}, {'end': 2616.136, 'src': 'embed', 'start': 2584.548, 'weight': 5, 'content': [{'end': 2590.891, 'text': 'So sometimes you may need to change the router outlet component based on logic occurring in a component class, for instance.', 'start': 2584.548, 'duration': 6.343}, {'end': 2597.073, 'text': "So in this case, let's import router from the Angular router library at the top.", 'start': 2591.511, 'duration': 5.562}, {'end': 2603.987, 'text': 'right now, once again, we have to create an instance of router through dependency injection.', 'start': 2598.743, 'duration': 5.244}, {'end': 2616.136, 'text': "so i'm going to simply copy and paste that real quick private router set to router and then we're going to create a custom method.", 'start': 2603.987, 'duration': 12.149}], 'summary': 'Changing router outlet component based on logic in angular.', 'duration': 31.588, 'max_score': 2584.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP82584548.jpg'}, {'end': 2699.517, 'src': 'heatmap', 'start': 2636.013, 'weight': 3, 'content': [{'end': 2637.674, 'text': "So we'll set it to the path right there.", 'start': 2636.013, 'duration': 1.661}, {'end': 2639.335, 'text': 'All right.', 'start': 2637.694, 'duration': 1.641}, {'end': 2640.375, 'text': "So let's save this.", 'start': 2639.395, 'duration': 0.98}, {'end': 2651.14, 'text': "And then next we open up the about component template, and I'm just going to real quickly paste in a value right here.", 'start': 2641.256, 'duration': 9.884}, {'end': 2654.886, 'text': "So all that's happening is this is what I'm all about.", 'start': 2652.765, 'duration': 2.121}, {'end': 2659.668, 'text': "We're creating a link here and I click event method.", 'start': 2655.406, 'duration': 4.262}, {'end': 2660.768, 'text': "We're saying, send me home.", 'start': 2659.688, 'duration': 1.08}, {'end': 2662.228, 'text': 'And then it says, take me back.', 'start': 2661.188, 'duration': 1.04}, {'end': 2663.769, 'text': "That's all it is.", 'start': 2663.069, 'duration': 0.7}, {'end': 2664.969, 'text': "So let's save.", 'start': 2664.309, 'duration': 0.66}, {'end': 2668.531, 'text': 'All right.', 'start': 2664.989, 'duration': 3.542}, {'end': 2671.172, 'text': 'If I click this, there we go.', 'start': 2668.591, 'duration': 2.581}, {'end': 2676.69, 'text': 'All right, so that was just a very quick rundown of the Angular 5 router.', 'start': 2672.446, 'duration': 4.244}, {'end': 2684.859, 'text': 'Really what we cover will help you get by in most instances when it comes to working with the Angular 5 router.', 'start': 2678.192, 'duration': 6.667}, {'end': 2690.525, 'text': "Okay, so in the next section, we're gonna talk about Angular 5 services.", 'start': 2685.44, 'duration': 5.085}, {'end': 2696.756, 'text': 'Hey all, Gary Simon from Corsetro.', 'start': 2694.895, 'duration': 1.861}, {'end': 2699.517, 'text': "Let's take a look at Angular 5 services.", 'start': 2697.216, 'duration': 2.301}], 'summary': 'A quick rundown of angular 5 router and services by gary simon from corsetro.', 'duration': 30.926, 'max_score': 2636.013, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP82636013.jpg'}], 'start': 2213.786, 'title': 'Angular 5: animation, routing, and navigation', 'summary': "Covers the powerful animation library and capabilities of angular 5, setting up routing for components, fetching route parameters, and implementing component-based router navigation. it also includes examples of navigating between components and a quick rundown of the angular 5 router's functionality.", 'chapters': [{'end': 2481.392, 'start': 2213.786, 'title': 'Angular 5: animation and routing', 'summary': 'Introduces the powerful animation library and capabilities of angular 5, explores setting up routing for components, and explains how to set and fetch angular 5 route parameters.', 'duration': 267.606, 'highlights': ['The animation library and capabilities of Angular 5 are really powerful, providing potential capabilities for animation. The powerful animation library and capabilities of Angular 5 are highlighted, suggesting experimentation with them.', 'Setting up routing for components involves importing the components and defining paths in the app routing module. The process of setting up routing for components is explained, including the importation of components and defining paths.', 'The chapter explains how to set and fetch Angular 5 route parameters, demonstrating the use of route parameters and retrieving values in the component class. The explanation of setting and fetching Angular 5 route parameters is provided, including the use of route parameters and retrieving values in the component class.']}, {'end': 2699.517, 'start': 2482.412, 'title': 'Angular 5 router and component navigation', 'summary': "Covers the implementation of route parameters and component-based router navigation in the angular 5 framework, including examples of fetching route parameters and navigating between components, with a quick rundown of the angular 5 router's functionality.", 'duration': 217.105, 'highlights': ["The chapter covers the implementation of route parameters and component-based router navigation in the Angular 5 framework, including examples of fetching route parameters and navigating between components, with a quick rundown of the Angular 5 router's functionality.", 'The activated route from the angular router library gives access to the route parameters, demonstrated by fetching and logging the response.id, providing practical understanding of route parameter usage.', 'Demonstrates the process of creating an instance of router through dependency injection and implementing component-based router navigation using the navigate method, showcasing practical usage of router functionality.', "Provides a quick rundown of the Angular 5 router's functionality, emphasizing its relevance and utility in working with the Angular 5 framework.", 'The chapter concludes with a brief overview of the covered topics and a preview of the next section on Angular 5 services, setting the context for the subsequent learning content.']}], 'duration': 485.731, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP82213786.jpg', 'highlights': ['The powerful animation library and capabilities of Angular 5 are highlighted, suggesting experimentation with them.', 'The process of setting up routing for components is explained, including the importation of components and defining paths.', 'The explanation of setting and fetching Angular 5 route parameters is provided, including the use of route parameters and retrieving values in the component class.', "The chapter covers the implementation of route parameters and component-based router navigation in the Angular 5 framework, including examples of fetching route parameters and navigating between components, with a quick rundown of the Angular 5 router's functionality.", 'The activated route from the angular router library gives access to the route parameters, demonstrated by fetching and logging the response.id, providing practical understanding of route parameter usage.', 'Demonstrates the process of creating an instance of router through dependency injection and implementing component-based router navigation using the navigate method, showcasing practical usage of router functionality.', "Provides a quick rundown of the Angular 5 router's functionality, emphasizing its relevance and utility in working with the Angular 5 framework.", 'The chapter concludes with a brief overview of the covered topics and a preview of the next section on Angular 5 services, setting the context for the subsequent learning content.']}, {'end': 3514.909, 'segs': [{'end': 2813.684, 'src': 'embed', 'start': 2775.409, 'weight': 0, 'content': [{'end': 2784.296, 'text': 'So the, one of the best ways to share data between components is to use the RxJS behavior subject library.', 'start': 2775.409, 'duration': 8.887}, {'end': 2790.261, 'text': "So we're going to update it to import behavior subject.", 'start': 2784.356, 'duration': 5.905}, {'end': 2796.44, 'text': 'from rxjs behavior subject.', 'start': 2792.216, 'duration': 4.224}, {'end': 2806.409, 'text': "All right, next in our class, we're going to say, we're going to create a private property called goals.", 'start': 2798.442, 'duration': 7.967}, {'end': 2813.684, 'text': 'And this is going to be a new behavior, subject of type any,', 'start': 2807.63, 'duration': 6.054}], 'summary': 'Using rxjs behavior subject for data sharing between components.', 'duration': 38.275, 'max_score': 2775.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP82775409.jpg'}, {'end': 2924.63, 'src': 'heatmap', 'start': 2845.301, 'weight': 0.973, 'content': [{'end': 2853.563, 'text': "Next, we're going to create a custom method, which will be accessible from our other components called change goal.", 'start': 2845.301, 'duration': 8.262}, {'end': 2860.915, 'text': "We're going to pass in the actual goal and this goals dot next is goal.", 'start': 2854.974, 'duration': 5.941}, {'end': 2862.995, 'text': "And that's it.", 'start': 2862.435, 'duration': 0.56}, {'end': 2869.356, 'text': 'So before we can actually use this service, we have to import it into the app module file.', 'start': 2863.775, 'duration': 5.581}, {'end': 2881.218, 'text': "So we're going to import our data service from data dot service, and then we add it to the providers array right here and then save.", 'start': 2870.097, 'duration': 11.121}, {'end': 2884.499, 'text': "So let's go ahead to our home component.", 'start': 2882.339, 'duration': 2.16}, {'end': 2892.609, 'text': "And we'll import it at the top, just like that.", 'start': 2885.661, 'duration': 6.948}, {'end': 2898.616, 'text': 'And then we have to create an instance of it through dependency injection.', 'start': 2893.63, 'duration': 4.986}, {'end': 2901.78, 'text': 'So the way we do that is in the constructor.', 'start': 2899.177, 'duration': 2.603}, {'end': 2906.543, 'text': 'We also want to change this.', 'start': 2905.322, 'duration': 1.221}, {'end': 2909.164, 'text': "We don't need to set this here anymore, make that empty.", 'start': 2906.603, 'duration': 2.561}, {'end': 2914.626, 'text': "And so we're creating an instance called underscore data to data service.", 'start': 2910.064, 'duration': 4.562}, {'end': 2924.63, 'text': "And then on ng on init, just underneath our item count, we're going to add this data.", 'start': 2915.926, 'duration': 8.704}], 'summary': "Creating a custom method 'change goal' to update goal; importing and using data service in app module and home component.", 'duration': 79.329, 'max_score': 2845.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP82845301.jpg'}, {'end': 3107.241, 'src': 'embed', 'start': 3080.088, 'weight': 1, 'content': [{'end': 3083.89, 'text': "We don't have the styling set up quite right here, but there they are right here.", 'start': 3080.088, 'duration': 3.802}, {'end': 3090.973, 'text': "You can also see if we go to home, we click on one, we'll go back here and now it is updated in this component as well.", 'start': 3083.91, 'duration': 7.063}, {'end': 3098.557, 'text': "So that's how you use and share data between different components using a service file.", 'start': 3091.594, 'duration': 6.963}, {'end': 3105.32, 'text': "Of course, service files can be used for much more than that and a lot of different use cases, but that's the general gist of how they work.", 'start': 3098.677, 'duration': 6.643}, {'end': 3107.241, 'text': 'Basically you create a service file.', 'start': 3105.7, 'duration': 1.541}], 'summary': 'Sharing data between components using a service file.', 'duration': 27.153, 'max_score': 3080.088, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP83080088.jpg'}, {'end': 3266.735, 'src': 'embed', 'start': 3239.741, 'weight': 2, 'content': [{'end': 3245.726, 'text': "It removes that dist folder initially, and then we'll add it back, okay? And now we'll see, look at that.", 'start': 3239.741, 'duration': 5.985}, {'end': 3250.189, 'text': 'The biggest file now is only 352 megs.', 'start': 3245.766, 'duration': 4.423}, {'end': 3252.031, 'text': "This one's 60.", 'start': 3250.67, 'duration': 1.361}, {'end': 3258.296, 'text': "So really there's about an 89% reduction for this particular project when you're running the production.", 'start': 3252.031, 'duration': 6.265}, {'end': 3266.735, 'text': 'So at this point, now that we have a distribution created for our app, now we can deploy it.', 'start': 3259.076, 'duration': 7.659}], 'summary': 'After optimization, the largest file is reduced to 352 mb, an 89% reduction, allowing for deployment.', 'duration': 26.994, 'max_score': 3239.741, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP83239741.jpg'}, {'end': 3477.304, 'src': 'embed', 'start': 3441.368, 'weight': 3, 'content': [{'end': 3450.39, 'text': "If it's successful, we'll see that it says Momentarily, yep, successfully published and now we can access it at that URL.", 'start': 3441.368, 'duration': 9.022}, {'end': 3462.877, 'text': "So now I'll just type in design course and github.io and this will be ng5.", 'start': 3452.491, 'duration': 10.386}, {'end': 3465.018, 'text': 'There we go.', 'start': 3464.477, 'duration': 0.541}, {'end': 3471.001, 'text': 'And now you can even visit this in your own browser and we will have our app.', 'start': 3465.038, 'duration': 5.963}, {'end': 3477.304, 'text': 'All right, so hopefully you learned a lot about quickly deploying your app.', 'start': 3473.081, 'duration': 4.223}], 'summary': 'Successfully published app at design course.github.io/ng5.', 'duration': 35.936, 'max_score': 3441.368, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP83441368.jpg'}], 'start': 2699.877, 'title': 'Sharing data and angular 5 deployment', 'summary': 'Covers creating a service file to share data between components with rxjs behavior subject and deploying an angular 5 application, resulting in an 89% reduction in file size, and detailing the deployment process to a server or github pages.', 'chapters': [{'end': 3115.533, 'start': 2699.877, 'title': 'Sharing data using a service file', 'summary': 'Covers the creation of a service file to share data between components, utilizing rxjs behavior subject to update and access the shared data, and implementing the service file for accessing and updating data in both the home and about components.', 'duration': 415.656, 'highlights': ['Service files are used for making HTTP calls or for sharing data between components. Service files serve the purpose of sharing data between components and are particularly useful for making HTTP calls.', 'Utilizing RxJS behavior subject to update and access the shared data. The use of RxJS behavior subject allows for efficient updating and access to the shared data between components.', 'Implementing the service file for accessing and updating data in both the home and about components. The service file is implemented to enable accessing and updating shared data in both the home and about components, demonstrating its practical usage.']}, {'end': 3514.909, 'start': 3116.094, 'title': 'Angular 5 deployment', 'summary': 'Discusses the process of deploying an angular 5 application, emphasizing the importance of using the production flag to optimize file sizes, highlighting an 89% reduction in file size, and detailing the deployment process to a server or github pages.', 'duration': 398.815, 'highlights': ['It runs a number of different optimizations, which makes the app significantly smaller and faster, resulting in an 89% reduction in file size for the project when using the production flag. Using the production flag during the build command runs optimizations that reduce the file size by 89%, making the app significantly smaller and faster.', 'The build command without the production flag results in a larger file size, with the vendor.bundle.js being 3.1 megabytes, while using the production flag reduces the largest file to only 352 megs, demonstrating the importance of optimization. Running the build command without the production flag leads to a larger file size, with the vendor.bundle.js being 3.1 megabytes. However, using the production flag reduces the largest file to only 352 megs, emphasizing the importance of optimization.', 'The deployment options include uploading the files to a server and using GitHub Pages, providing a quick way to deploy the app, and the process of setting up a GitHub repo and running the ng build command for GitHub Pages deployment is explained in detail. The deployment options involve uploading the files to a server or using GitHub Pages, where the process of setting up a GitHub repo and running the ng build command for GitHub Pages deployment is explained in detail.']}], 'duration': 815.032, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oa9cnWTpqP8/pics/oa9cnWTpqP82699877.jpg', 'highlights': ['Using RxJS behavior subject for efficient data sharing between components.', 'Implementing service file for accessing and updating data in home and about components.', 'Optimizing app for 89% reduction in file size using production flag during build command.', 'Detailing deployment process to server or GitHub Pages for quick app deployment.']}], 'highlights': ['Setting up Angular 5 project, creating/nesting components using Angular CLI, understanding component structure and nesting, foundation for templating and styling exploration', 'Creating a new project using NG new with specified flags, setup time less than 60 seconds', "The process of installing the Angular animations library is crucial for implementing animation in Angular 5, and it involves running 'NPM install angular animations' as a development dependency", "The chapter covers the implementation of route parameters and component-based router navigation in the Angular 5 framework, including examples of fetching route parameters and navigating between components, with a quick rundown of the Angular 5 router's functionality", 'Using RxJS behavior subject for efficient data sharing between components', 'Optimizing app for 89% reduction in file size using production flag during build command', 'Detailing deployment process to server or GitHub Pages for quick app deployment', 'The demonstration includes a practical example of animating the items as they get added, emphasizing the potential applications of Angular 5 animation']}