Angular 2 Essential Training - Part 6 - Interface and Lifecycle Hooks | Patrick Schroeder | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Angular 2 Essential Training - Part 6 - Interface and Lifecycle Hooks

teacher avatar Patrick Schroeder, Teaching JavaScript Courses

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

7 Lessons (15m)
    • 1. Interface Intro

      0:27
    • 2. Interface Explained

      2:03
    • 3. Using Interfaces

      3:19
    • 4. Interface Example in Our App

      2:22
    • 5. Lifecycle Hooks Intro

      0:35
    • 6. Lifecycle Hooks Explained

      2:58
    • 7. Lifecycle Hook Example

      3:05
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

64

Students

--

Projects

About This Class

Welcome to Part 6 of the course.

In this section we'll discuss interfaces and lifecycle hooks.

Interface Explained - Interfaces are used within typescript in order to define the data types for a grouping of properties and methods.

Using Interfaces - Interfaces are used within typescript in order to define the data types for a grouping of properties and methods.

Lifecycle Hooks Explained - Angular defines lifecycle hooks as a lifecycle managed by Angular itself. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM.

Lifecycle Hooks Example - Lets now see how to add a new lifecycle hook to our application.

Code for this course is located here: https://github.com/jakblak/learn-angular2

Meet Your Teacher

Teacher Profile Image

Patrick Schroeder

Teaching JavaScript Courses

Teacher

Patrick Schroeder is a self-taught full stack JavaScript developer. He enjoys working with Angular, Node.js, Mongodb, React.js, Firebase, and anything else javascript related. Patrick is passionate about teaching Javascript. He loves to help others understand difficult concepts by creating clear presentations that gradually builds to full comprehension of a given topic. He is very interested in furthering his knowledge of IOT and wearable products with the intention of teaching cutting edge technologies and collaborating to bring new products to life.

Learn JavaScript Programming

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Interface Intro: in this section, we're going to be talking about interfaces and typescript. We'll start off with a definition of what interfaces are and explore why they're used well , then work through a few different examples and explore the different ways that we can go about implementing an interface and then will create and use a book interface in our existing application. 2. Interface Explained: interfaces air used within typescript in order to define the data types for a grouping of properties and methods. Here is an example of an interface we're typically going to be exporting at the interface so that we can use it in other files. Then we used the interface keyword followed by inappropriate name. The name is usually in Pascal casing and it's prefixed with the letter I inside of our interface. We've defined properties along with their data types, So this is the same as when we define properties inside of a class except here. We're not setting them equal to anything. Were Onley defining the properties type and here we've defined a method. We've included the name of the method, any parameters, along with their data types and the return type which in this case is of type void since nothing is being returned. Also, notice how we're using semi colons at the end of every property and met the definition. Interfaces essentially create a contract between the data and it's defined type. If at any time this contract is not being adhere to, will receive an error in our editor, usually in the form of a red squiggly line. So the purpose of interfaces is to provide us with strong typing for groupings of properties and methods, which creates better tooling support as we build, debug and maintain our code. So this means that interfaces and strong typing in general are development time features, so that when you're actually running your application, you won't be getting any consul or browser errors. If the data that you're displaying doesn't match your defined interface types, you'll just get potentially unexpected results. 3. Using Interfaces: in the next few videos, we're going to be going a little more in depth, exploring what interfaces are and how we can use them. I mentioned at the beginning that interfaces are a feature of typescript, as opposed to angular, too. So what you'll see is a lot of the source code and angular to is written as a typescript interface. If we never get over to the angular docks, then click on this AP I reference we're presented with some icons here to sort by. One of these options is interface. Clicking on this icon brings us to a list of all the A P I methods written as an interface . One of these is called pipe transform, and it's one that we've already used. Do you remember how we use pipe transform? We imported the file from angular core. Then we implemented it within our class. We used the key word implement as a way to access properties and methods within. At this pipe transform, let's now practice building and using interfaces by creating a book interface inside of our Booklist component opening up my booklist component file. I'm going to create an interface for our books below. I'm going to the far in my book interface directly in this file just for demonstration purposes. When adding an interface in this way, we need to add it above our component decorator. Well, first used my interface keyword and then the name of my new interface, which is I book followed by Curly braces. Now let's the final properties. I'm going to just copy over the properties that we've already defined in our array of books , then change around the values to their respective type, remembering to change the comma here to a semi colon. And now I can change this books, which is currently the fine, is a type any to the type of my interface, which is I book. Everything now works the same, except that we're using strong typing to define or books Ray. As a result, if I were to change my reviews value toe a string, I'll get a squiggly line error. Also, if I would add an additional property that's not already set up in our interface, such as the property hardcover, and said it's a false, I'll get a squiggly line air just on that line. There may be times when We don't know whether or not we're going to be getting back a piece of data and these cases, we can use the question mark symbol after our property key. So to demonstrate will add a hardcover property, followed by a question mark. That's of type Boolean. Now it doesn't matter whether or not we declare our hardcover property within our books array so we can delete the property definition, and we won't be getting any errors. Now that we've seen how to use interfaces as a source for strong typing, let's see a more real world example where we export our interface. 4. Interface Example in Our App: applications will usually get their data from one of two places either a local database or an outside A P I. For this project. I've supplied you with the Jason file that includes data you would typically get back from either of these sources. It is located in your A P I folder, and it's called books dot Jason. If we open it up, you can see that it holds all of the data that's currently being hard coded into our application. Let's now go ahead and create an interface to strongly typed this data. To do this will add a new foul into our books folder named Book dot ts. And this is the standard file naming convention for interfaces. We just use the singular name of the interface that were referencing opening up this file. Let's begin by making sure that we export our interface so we can use it and other files, and then we'll name our interface. I book Inside of our interface will define the types for each one of the properties listed in our books dot Jason file. So we'll need add an i D. The name, product code release date, description, author, genre specifications in stock price star rating an image or Oh, Now, if I wanted to use this interface in my books list component foul, then I would just need to import it like this. Then I can comment out this iBook interface that we already declared below. And if we check our implementation down below notice that we are getting a squiggly line error. To fix this, we would need to change that key names to match what we've defined above in our interface. But since this was just a introduction to interfaces, I'm going to leave it how it is now and will revisit and fix this when we get to the section called Services. 5. Lifecycle Hooks Intro: Hello and welcome back to angular, two essential training in this section, we're going to be discussing how to use components. Lifecycle hooks. We'll start this section off with the definition of what life cycle hooks are. Then we'll explore the three most commonly used life cycle hooks, which are N G on a net N. G on changes and N. G on destroy, finally will work through a few examples showing how we can use each one of these lifecycle hooks with thin our application. 6. Lifecycle Hooks Explained: the best. Understand what a component lifecycle hook is. Let's open up the angular documentation and navigate over to the developer guide. And then we'll click on life Cycle hooks. Angular defines lifecycle hooks as a lifecycle managed by angular itself. Angular creates. It renders it creates and renders its Children checks when its data bound properties change and destroys it before removing it from the dom. Angular offers component lifecycle hooks that give us visibility into these key moments and the ability to act when they occur. So basically angular creates our components, and then it builds our child components. And then it watches for any changes that are made to our properties and finally removes them from the dumb. Angular gives us access to each one of these points in time, and that's what we're using life cycle hooks for. So if we scroll down a bit under lifecycle sequence here, we can see the order angular uses for each one of these hooks. The 1st 2 Engy on changes and N G On in it are the ones that you'll be seeing most commonly used inside of any angular applications. The others here are used before and after initializing child components. When using life cycle hooks we use on and net to perform. Any component initialization after angular has initialized the data bound properties we'll use on changes to perform some action when a data bound property input value has changed and you'll also see on destroy being used to perform cleanup within our components. Now let's take a look at how to implement lifecycle hooks. I'm using the word implement here because thes lifecycle hooks are all interfaces. So when using any one of these hooks, there are three steps. The first thing we do is we add in our hook name in our list of imports, and they're located in angular core library, so we can add a common next to the component and then add are on and that life cycle hook in this example. Next, we need to implement our hook, just like we do any other interface by saying that our component class implements the hook of our choice, which in this case is on in it. And finally we can use the N G on in that method to perform some function within our class and just the further clarify on in It is the name of our interface and N G. On in it is the name of the method that's defined within the interface. Now let's go ahead and work through a few examples, including each one of these lifecycle hooks in our application. 7. Lifecycle Hook Example: Let's now add a couple of new life cycle hooks to our application. I'll start out by opening up our books list. Component file. I'm going to clean it up a little bit. First, by removing our interface reference and change your books back to an array of type. Any now in order to use our hooks will first add them to our import statement after component, so we'll add on in it and on changes. Next, we have to make sure to implement each one of our hooks so books list component implements on in it comma on changes. We'll get a warning under our class name here because we need to add the corresponding methods. We'll just add my two methods here above the properties. We'll start with injury on in it. Here. We'll just add a log message, letting us know that our component is initialized and also putting out a property that we defined below, which is called books and stuck. Next, we have N G on changes. So right now there's actually not a good example I could provide because this is used in two main instances. The first is when we're communicating between a parent and child component. And the second is when we have data that's updated over the wire, like when we using Web sockets or an observable, which will discuss in our services section. But I do want to give you a quick example illustrating this concept. So inside my energy on changes, I'm going to log out new change detected then below that I'm going to create a new property that has an array of two items called zebra and moose. Then I'm going to create a new method right above called change method, which is going toe alter our original array and instead have two different animals of cat and dog. Then below that I'm going to log change method happened along with our new animals. Then, to trigger this method, I'm going to open up the corresponding HTML file and then just add a new button with a click event of change method that we just created. So now let's save everything and test this out. So first off you can see that we are getting our log message from our Engy on in it, and then when we go ahead and click on our button, are array is updated and we get a log message, but we haven't activated. N g on changes. Lifecycle hook So the take away here is that Engy on changes is Onley triggered when properties have been updated either between the child and parent component or when data has been updated via and observable. So now let's move on to nested components and which will see a real life example of N G on changes being used.