Angular ngif directive

this is part 13 of angular cloud tutorial in this video well discus angular ng F structural directive with an example along the way we'll also discuss how to prevent a button from submitting the form so here is what you want to do on our create employee form we want to include a field to capture the photo path of the employee so when this form initially loads we want to include this photo path field where the end user can type the part of the photo and we also want to display this show preview button so when they click this show preview button we want to display the preview of the image available at this specified path and then the text on the button should dynamically change to hide preview and then when they click this hide preview button we want to hide the preview of the image and the text on the button should change back to show preview the first step is to include the required HTML for the photo path field it's going to be very similar to this phone number field so let's copy and paste this HTML and then we'll change the bits that are required I'm going to place this HTML just below the date of birth field let's change the text on this label to photo path and along the same lines let's also change the for attribute of the label ID of the input field name and ng-model to photo path since we have set the name property of the input field and any model directive of the input field to photo path angle generated for model is going to create a property with the name photo path and it's going to keep track of what we type into this photo path input field notice we have the photo path field as expected and as we type into this photo path field notice this photo path property within this angle I generated for model whatever we type Y is being captured by the angler auto-generated for model now we want to include an image element just below this photo path field so it can preview the image available at the specified photo path so just below the photo path field let's include the image element notice we are setting the image elements height and width to 200 pixels and we are binding the photo path property to the source property of the image element let's save our changes and then take a look at the browser notice we have our image element just below the photo path field let's launch browser developer tools notice we have four zero for error on the console tab by getting this four zero for error because on the initial form load the photo part property is now and we are binding that photo path property to the source property of the image element since this photo path property is now we're getting the four zero for error notice at the moment we only have one four zero for error we can see that one error right here now notice what happens as we type into this photo path input field every time a character is typed into this for the path input field we have f404 error this is because every time we type into this field angler is trying to bind the corresponding property that is the photo path property with the source property of the image element because we have specified that binding right here since we have not completed typing a valid photo path angler is not able to find a photo at this specified part and that's the reason we are getting this for zero for error once we complete typing a valid photo path we get to see the photo as expected on our initial form load we do not want to display the image element we don't want to render it at all only when we click the show preview button that's when we want to render the image element and then show the preview of the image available at the specified path so to keep it hidden within our create employee component class I'm going to create a boolean property I'm going to call it preview photo and I'm going to initialize that to false next in the view template on our image element I'm going to use the ngf structural director I'm going to set its expression to the boolean property that we have just created within our component class so let's set the expression of this NDF structural directive to that boolean property since we have initialized this property to false when the form initially loads this image element is not added to the browser Dom meaning it's not rendered at all so if the expression is false say this image element will not be rendered if it is true thee only then the image element will be rendered so on the initial form load notice we don't have the image element displayed and as we type into the photo path field notice we don't have any four zero four errors logged to the console next we need this show preview button to show and hide the photo preview so between the photo path input field and the image element let's include show preview button notice here we're using the bootstrap BTN and BTN primary button classes for styling next we need to wire up the button click event handler so when we click this button we want to call a method on our component class we don't have this toggle photo preview method yet we'll clear that in just a bit and notice the syntax right here we are using parentheses so this is even binding we discussed even binding in detail in part 14 of our angular 2 tutorial so if you're new to even binding please check out our angular 2 course now all we want this toggle photo preview method to do is toggle the value that we have in this preview photo property now we have a typo here we are missing Oh so let's correct the typo and let's create this method on our component class so just after the constructor let's create the toggle photo preview method and all this method is going to do is toggle the value that we have in preview photo property so this dot preview photo equals not this dot preview photo let's say what changes and take a look at the browser notice we have show preview button as expected so within the photo path property let's type a valid photo path so we have this mark dot PNG within the images folder in the assets folder so if we take a look at our project notice within the assets folder we have images and within that we have mark dot PNG at the moment we are assuming we already have the employee photo in our upcoming videos in this series will discuss how to upload files using angular for now let's assume we already have the employee photo and we are just capturing the path using this create employee form so once we have this valid photo path when we click show preview we see the employee photo and when we click this button again the preview is hidden so it's all working as expected but we have two problems here and here is the first problem they text on the button is not changing dynamically when we don't have the preview we want the text to be show preview but when we click it and when we see the preview we want the text to be hide preview so when we click on it again the preview will be hidden so we want to change the text on the button dynamically depending on whether the preview is available or not and then look at this console here let's clear out everything that we already have now every time I click the button notice we're actually logging the anglo generated form model to the console notice the code to log the employee form to the console is present in the same employee method and we are binding the same employee method to the ng submit directive on our form element so when we submit the form we want to call the same employee method passing it the employee form under the moment on our form you only have one submit button and that is our Save button so notice that type attribute on this button it is set to submit so only when we click the Save button we get the form submitted and then we want the code and save employee method to be executed which logs the employee form to the console but every time you are clicking this preview button you know the form is locked to the console and we don't want that to happen notice this again we clear the console and every time we click this show preview button we have it logged to the console so let's fix this problem first the reason we have this problem is because there show preview button is behaving as a submit button and the reason it's behaving as a submit button is because we don't have the type attribute set explicitly when we don't have the type attribute set explicitly the button behaves as a submit button now we don't want this button to behave as a submit button so I'm going to set the type attribute explicitly and set it to button notice now the show preview button is not behaving as a submit button every time we click the button notice now we don't have the employee form logged to the console next let's fix the text on the button we want the text on the button to change dynamically depending on whether we have the preview visible or not to set the text on the button dynamically we are going to make use of interpolation so instead of hard-coding the text let's use interpolation and then make use of this property preview photo so if the value of this property is true so let's use ternary operator here so if the value of preview photo is true then that means we have the preview available so at that point we want to display hide preview on the button so if this property value is true it's going to append this text to this text so we will have hide preview on the other hand if the preview is not available meaning if the value of this property is false then we want show preview as the text on the button so let's format the code save our changes and then take one final look at the browser notice at the moment we don't have the photo preview so the text on the button is show preview when we type in a valid photo path and click the button we have the preview and the text changes to hide preview when I click the button again the preview is hidden and the tax changed back to show preview here is the code that we just discussed when we click the show preview button we are calling this toggle photo preview method and all this method does is toggle the value that we have in preview photo property and we are using this preview photo property and the nga structural directive to add or remove the image element from the Dom we're also using the same property to dynamically set the text on the button thank you for listening and have a great day

Channel: kudvenkat

Views: 42,049

Keywords: ngif example in angular 2, angular2 ngif, ngif angular 4, ngif angular 4 example, angular show hide element, angular show hide on click, angular bind image src, angular img src binding, angular toggle visibility onclick, angular change button text onclick, angular button text conditional, angular prevent button from submitting form

Id: wG4E-FI_Fvs

Length: 11min 44sec (704 seconds)

Published: Wed Jan 24 2018