Install Ionic from https:\/\/ionicframework.com\/getting-started\/<\/em><\/a><\/p>\n If you have already downloaded those skip this step.<\/p>\n <\/p>\n Create a blank ionic app<\/p>\n Open command prompt if you are using windows or open terminal if you are using Linux \/ Mac and then type the following code (here my app name is myEmojiApp)<\/p>\n ionic start myEmojiApp blank<\/em><\/p>\n cd myEmojiApp<\/em><\/p>\n ionic serve<\/em><\/p>\n <\/p>\n home.html<\/em><\/p>\n Go to https:\/\/ionicframework.com\/docs\/components\/#fabs<\/a><\/em> and use Floating action buttons for various types of emoji<\/p>\n I am going to put those codes into the home.html.<\/p>\n Here we are using 4 types of expression. Like,\u00a0 Love, Dislike and Angry<\/p>\n <\/p>\n In the assets folder create a folder named Images and put all the images that we are going to show on click of each expressions<\/p>\n In my case I am using 4 types of images for 4 types of emoji<\/p>\n angry.png<\/em><\/p>\n dislike.jpg<\/em><\/p>\n heart.png<\/em><\/p>\n like.jpg<\/em><\/p>\n <\/p>\n Home.html<\/em><\/p>\n We will trigger a function called addExpression() on click each emoji buttons<\/p>\n Let us provide template id (i.e. \u00a0#demo) and element id (i.e. \u00a0id=\u201ddemo\u201d) in the each emoji buttons<\/p>\n And we will pass the id as a parameter or argument within that above declared function.<\/p>\n <\/p>\n home.ts<\/em><\/p>\n Here we will define our function addExpression()<\/p>\n Here we will have a string type variable \u201cexpression<\/em>\u201d<\/p>\n Within that function we are assigning the variable with the element id which we are getting from that argument \u201cval<\/em>\u201d (i.e. like, love etc.)<\/p>\n If we open the browser console and click those emoji buttons we can see the expression id for each click in that console.<\/p>\n <\/p>\n Home.html<\/em><\/p>\n We will add a simple div container below <ion-fab><\/ion-fab> to show the exact images for each emoji<\/p>\n Within the div container we will use img<\/em> tag to show the images. The main logic will be here.<\/strong><\/p>\n We are going to use ternary nested if condition<\/strong> here. Thus you will also know how to use ternary nested if conditions in Ionic app.<\/p>\n <img src=”assets\/images” alt=””><\/em><\/p>\n If we print expression variable value here we have to write {{expression}} for Ionic<\/p>\n Thus we can use this variable as alternative text of img tag like<\/p>\n <img src=”assets\/images” alt=”{{expression}}”><\/em><\/p>\n Now as per ternary condition we can write the logic like \u201cif expression value is equal to like then use image like.jpg else blank<\/em>\u201c<\/p><\/blockquote>\n So, we can write in ternary operator {{expression==\u2019like\u2019?\u2019like.jpg\u2019:\u2019\u2019}}<\/em><\/p>\n And if we want that \u201cif expression value is equal to like then use image like.jpg else if expression value is equal to love then use image heart.png else if expression value is dislike then use image dislike.jpg and lastly if expression value is angry then use image angry.png<\/em>\u201d<\/p><\/blockquote>\n In this case we have to write {{expression == ‘like’?’like.jpg’:expression == ‘love’?’heart.png’:expression == ‘dislike’?’dislike.jpg’:expression == ‘angry’?’angry.png’:”}}<\/em><\/p>\n Now it is clear how to use ternary nested if else conditions in one single line<\/p>\n We can write the following now<\/p>\n <img src=”assets\/images\/{{expression == ‘like’?’like.jpg’:expression == ‘love’?’heart.png’:expression == ‘dislike’?’dislike.jpg’:expression == ‘angry’?’angry.png’:”}}” alt=”{{expression}}”><\/em><\/p>\n We can declare the values as class here<\/p>\n <\/p>\n home.scss<\/em><\/p>\n We can style the image container div as per our need.<\/p>\n <\/p>\n That\u2019s it . Now if we run the app on localhost:8100<\/em><\/strong> it will look like<\/p>\n You can view or download the full code from Github<\/strong><\/em><\/a><\/p>\n Please share if you like it!<\/p>\nStep 2 :<\/h4>\n
Step 3 :<\/h4>\n
![\"step2\"](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/10\/step1.png\")
<\/p>\nStep 4 :<\/h4>\n
Step 5 :<\/h4>\n
![\"Step](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/10\/step4.png\")
<\/p>\n![\"Step](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/10\/step4-1.png\")
<\/p>\n<\/h4>\n
Step 6 :<\/h4>\n
![\"Step](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/10\/step5.png\")
<\/p>\nStep 7 :<\/h4>\n
![\"Step](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/10\/step6.png\")
<\/p>\n![\"Step](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/10\/step6-2.png\")
<\/p>\n![\"Step](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/10\/step6-3.png\")
<\/p>\nStep 8 :<\/h4>\n
![\"Step](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/10\/step7.png\")
<\/p>\nStep 9 :<\/h4>\n
![\"Demo\"](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/10\/demo.png\")
<\/p>\n