IONIC Section 5 - 5.15 Injecting Ionic controllers

Click here for more videos available on our youtube channel !

Hello everyone, now that we have seen the details concerning the debugging, we will be able to improve our layout. Let's say we want to ask the user if they really want to delete the recipe before it is. And so, in our file “recipe-detail.page.ts”, on this page we want to display an alert. Now, as I mentioned, we no longer include the Ionic alert controller in our template, then we select it with JavaScript code. We will be able to inject it directly in our constructor with "private alertCtrl:AlertController" and which also needs to be imported with "import { AlertController } from '@ionic/angular'". So we can use this service to create an alert and in our "onDeleteRecipe()" function, we enter “this.alertCtrl.create({header: 'Are you sure?', message:'Are you sure you want to delete this recipe?', buttons: [{ text: 'Back', role: 'back'}, { text : 'To delete'} ] }); ". So we added a "header" indicating a message in the header asking the user if he is sure he wants to delete the recipe. We then add buttons to give the user the option to respond. Thus, the buttons here will not simply be a table we will simply put "agree" but we can pass an object to configure a button with text, role and handler. Then we'll add “.then(alert => { alert.present();}); ". Now "create" returns a promise that actually gives us this alert item, it hasn't changed and then we can call "alertEl.present". Now, we want to delete if this button is activated, and for that, we will enter below "text: 'Delete', ", "handler: () => " by entering the code that must be executed. And that's all we need with this injecting alert controller, and so if we save our changes and go back to our application and go to a recipe for the deleted one, we get this interesting alert. If I click 'back' nothing happens but if I click delete we go ahead, we delete this when we get back to the home page. So it works and that's another advantage of using Ionic with Angular, we had very easy access to this alerts controller and we can inject it everywhere where we want to display an alert. This video is coming to an end, see you for the next one.