Understanding Inputs and Outputs in Angular

hello welcome to another video of the complete angular course in this video I'll be talking about interactions with components using inputs and outputs one of the major advantages of building applications using angular is the ability to divide our application into tiny modules called components but how can we control the behavior of the component from the outside and how can we react to the changes made by the component we need a way to insert and extract information from our components so we can interact with them take a look at this scenario we have a component that displays some text if we want to reuse the component it will display the same thing and behave the same way this is unwanted behavior whenever we want to reuse a component we want to be able to control this behavior so that it behaves differently than other components of the same type or simply to display a different message instead of the same thing over and over again in angular we can give our components entry points to establish a connection with the outside these entry points are known as inputs and outputs inputs are used to receive information from the outside and outputs are used to release information from the inside let's start by doing some examples open your angular project create a component using the ng January component command upon completion of the command expand a component folder and go to the component type script file to begin adding input style components we have to add input to our imports then declare an input receiver variable with the type of input it can receive the purpose of the input receiver is to receive and store the value that's passed into the component lastly add an input decorator as part of the variable declaration to indicate that a variable is used as the input receiver that's all we have to do to add an input so now we have an entry point where we can pass a string into our component from the outside it is a string because the type of our input receiver is a string it can be anything a boolean a number a class and so on to show how this work go through the component HTML page and use interpolation to place the variable in the page now add the component to the app component HTML page so we'll be render onto the screen go to the component type screw file and get the value of the selected property on the component decorator then go to the app component HTML page and add the component next we'll insert a string into the component go to the app component type script file and declare a string variable and assign a some text go back to the app component HTML page and insert the variable in the component to access inputs of a component we use the square bracket syntax and provide the name of the input we want to access which is the name we have given the input receiver then we specify what we want to insert we want to insert our variable so right now our components should display King let's verify that save the project and start the local server open the browser and go to localhost 4200 as you can see by adding input style component we can insert anything into our components and control the behavior from the outside now let's talk about outputs outputs or custom events that we can add to our component imagine a clinical setting when you go into a clinic you will first sign in and register your information this is the input process you're inputting your information so the clinic can compile the information and add you to the queue then if you sit and wait for your name to be called when it's time for the clinic to call for the next patient to see the doctor they will call a name and you'll listen to see if your name is call your subscribe to the system this is the purpose of outputs when you add an output you're adding a system where things from the outside of the component can subscribe and listen to whatever the component have to say then they can choose to react to it or not let's see how we can add outputs go back to vs code go to the component touchscreen file and an output and event emitter to our imports then declare an output variable the role of the variable is to store an event emitter object this object will turn on output variable into an invent node where things can subscribe to it and listen to our component inside the angle brackets is the type of information it can broadcast lastly at the output decorator in the variable declaration to indicate that the variable is an output so now we have an output that can broadcast a string value to the outside or we're not done we need to define when to trigger an event no to broadcast the information and what information we want to broadcast let's say we want to send a greeting message out using the name input we're taking in when we click on it button so I when will be when we click on a button and on what will be the greeting message go to the greeting component HTML page a define and attach a click event then assign a function for you to call go through the component type script file and define the function in the body of the function we will specify what to broadcast the event emitter object has a method call in MIT it takes in an argument and that's the information you want to release to the public since I invent emitter object can broadcast strings we pass the string if it were a boolean we'll pass a boolean and if it were object we'll pass an object and so on the purpose of the emit method is to trigger our event no to broadcast the information now the output is complete we can subscribe to it go back to the app component HTML page to access outputs on a component we use the parentheses and provide a name of the output we want to subscribe to then we assign a handle a function to handle there men go to the app component touch the file and define the function right now when we click on the button in the greeting component it will trigger the output event and call this handle a function let's verify that save the project and go to the browser click on the button as you can see we added a custom event to our component that we can handle you may be curious to what happened to our greeting message that is supposed to broadcast since I'll put some really events when they are trigger they return an event object that has information for an event we can use the event object as returned to us and pass it into the function at is calling to get the broadcast information here's what I mean go back to vs coal and then go to the app component HTML page the custom open event will return an event object when it gets fired so we can then pass that object into our function and get the message however we need to make the function and set that object go back to the app component touch the file and locate a function definition add a parameter to set that event object as an argument the event object is the message itself when we use the event method to make the event object take the form of the value that was passed into the method since we passed in a string the event object becomes a string so we can just get the message by getting the event object save the project and go to the browser click on the button as you can see we brought a value from inside and component out so we can use it outside of the component let's take a moment to recap what we have learned we learned that we can add inputs and output style components we use inputs to insert values into our components and output to get values out from the component we learn how to add inputs and output style components to add inputs we need to add input to our imports and then at the input decorator to the input receiver variable to add outputs we need to add output and event emitter to our imports and then at the output decorator to our output variable then we have to initialize the output variable with an event emitter object we learned that outputs or relay events and that they can be triggered by calling the mint method we learned that events returns an event object that contains information about the event we can use the event object as returned to us and get the value that was passed in the event method we learned I if we want to access an input we can use the square bracket syntax and provide the input we want to access inside then we assign a value we want to insert we also learned that if we want to access output events we use a parenthesis and provide an event we want to access then we assign a handle the function to handle the event if you find this video helpful please like and subscribe to support the channel if you have questions leave a comment in the comment section below now I want you to do this exercise create a component called car inside the component will have two inputs one output and one button to purchase the car we should be able to insert the price and brand of the car when we click on the purchase button it's just send the price and brand information out from the component and then we want to display an alert with the price and brand information pause the video and take a few minutes to do this exercise here's the solution generate a current component using the ng generate component command expand the car component folder and go into the current component type script file and input output and event emitter to our imports this will allow us to add inputs and outputs to our component add the two inputs one for the price and one for the brand then at the output that type of information we want to release to the public will be an object with the price and brand information go to the core component HTML page and add the purchase button then attach a click event to it and assign a function for it to call go back to the car component type file and define the function in the body of the function we will call the emit method from the output event emitter object and pass in an object with the price and brand information now we need to add a component to the application so it be rendered get the value from the selected property in the component decorator go to the add component HTML page and add the component insert the price and brand using the square bracket syntax and providing the name of the inputs then subscribe to the output by using the parentheses and providing the name of the output assign a handle a function and pass the event object into the function go to the app component type screw file and define the function since we pass an object with the price and brand property in the emit method the event object will also contain those properties we can get the price by grabbing the event object and accessing the price property and we can get the brand by grabbing the event object and accessing the brand property lastly we'll use the alert to print the information to the browser save the project and go to a browser click on your plan thanks for watching see you in the next video

Channel: Codeible

Views: 270

Keywords: King, King Wai Mark, Angular, TypeScript, HTML, CSS, Codeible, Introduction, Code, Beginner, Visual Studio, Node, NodeJS, Angular CLI, The Complete Angular Course, components, interpolation, setup, web development, how to build a website, Inputs, Outputs

Id: gziS4r58sDA

Length: 13min 7sec (787 seconds)

Published: Sun Jun 21 2020