Forem: Ishan Fernando

Angular Material Dialog Complete Guide

Ishan Fernando — Fri, 26 Aug 2022 16:45:28 +0000

In this article explain I am going a explain how to create a dialog in angular project.For this tutorial I am gone use one of the most famous Material UI Angular library. I contain feature packed dialog component which we can use for any project.

This article contain following section

1.How to install plugin and create a simple dialog
2.How to disable dialog close when clicking outside
3.Material dialog useful configurations options
4.How to pass data to the material dialog
5.How to passing data when closing the dialog
6.How to install the plugin and create a simple dialog
7.Before creating a modal first you must install the required 8.packages using the following command.

How to install the plugin and create a simple dialog

Before creating a modal first you must install the required packages using the following command.

ng add @angular/material

This will install Angular Material, the Component Dev Kit (CDK) and Angular Animations. Also, it will ask for the theme, global typography and setup browser animation. Make sure to select yes for browser animation. Otherwise, most of the animation in the Material module will not work.

Next, you can add the required material module to the angular module file. In this tutorial, I am using a fresh project and the only module which I have is the app module. You can add this to any module which you are hoping to use the dialog.

import { MatDialogModule } from '@angular/material/dialog'

@NgModule({

  imports: [
    ....
    MatDialogModule,
  ]
})

Let’s create a component to use as a dialog. Execute the following command and it will create a detail-dialog component under the component folder.

ng g c component/detail-dialog

Open the Html file of the created component and add the following HTML part.

<h1 mat-dialog-title>User Details</h1>
<div mat-dialog-content>
    <p>Name : Shan</p>
</div>
<div mat-dialog-actions>
  <button mat-button mat-dialog-close>Close</button>
</div>

In here you can see mainly 3 attributes.

1.mat-dialog-title – This is used to define the title of the dialog.
2.mat-dialog-content – Inside this div you can specify the content of the dialog
3.mat-dialog-actions – In here you can specify the list of action buttons. This will show at the bottom of the dialog.
Now you need a way to show the dialog when someone triggers an action. Therefore let’s add a button to the main AppComponent.

<button (click)="showDialog()">Show Contact Dialog</button>

Inside the app.component.ts file you need to add the trigger event.

Here,first, we need to inject the MatDialog service from the constructor. MatDialog service contains the open method which accepts dialog component as a first parameter.

import { MatDialog } from '@angular/material/dialog';
import { DetailDialogComponent } from './component/detail-dialog/detail-dialog.component';


export class AppComponent {
  title = 'dialog-app';

  constructor(private matDialog:MatDialog){

  }

  showDialog(){
    this.matDialog.open(DetailDialogComponent)
  }
}

When you click the button now you will be able to see a simple dialog.

How to disable dialog close when clicking outside

Default when user clicks outside of the dialog it gets closed. This behaviour can be changed by setting disableClose to true in the MatDialogConfig.

First, create an object of MatDialogConfig class and set disableClose property to true.

showDialog(){
    const mdConfig = new MatDialogConfig();
    mdConfig.disableClose = true;

    this.matDialog.open(DetailDialogComponent,mdConfig)
  }

Also you can just set those configurations like below.

this.matDialog.open(DetailDialogComponent,{width:"500px",direction: "rtl"})

Check complete article here

Connect with me - Instagram |Blog |Youtube

How to add toastr module to Angular project

Ishan Fernando — Sun, 14 Nov 2021 13:59:54 +0000

In any web application showing the alert or message to indicate the different status is required functionality to have which help to understand the users what is happening under the hood.

Install ngx-toastr plugin

First, open the terminal and run the following command inside your project to install the ngx-toastr plugin

npm install ngx-toastr --save

Next, you need to install animation package which is required to toastr plugin.

npm install @angular/animations --save

Applying toastr styling

Next open angular.json and add the following style which is required for toastr.

"styles": [
       "src/styles.scss",
       "node_modules/ngx-toastr/toastr.css"
  ],

Import toasrt module

Next open app.module.js file and import BrowserAnimationsModule and ToastrModule.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ToastrModule } from 'ngx-toastr';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

How to show toastr

First, you should apply ToastrService to the component where you want to show the toastr. Also need to initiate through the constructer method. Then you can use different methods like success, warning, error based on your requirement.

import { ToastrService } from 'ngx-toastr';

export class LandingComponent implements OnInit {


  constructor(private toastr:ToastrService) { }

  ngOnInit(): void {
  }

  showToastr(){
    this.toastr.success('This is the success toastr')
  }

}

Add a title to toastr

The first parameter of the method success accept the message and you can pass the title for the second parameter.

showToastr(){
    this.toastr.success('This is the success toastr',"Success")
  }

Change the toastr position

By default, toastr will appear in the right top corner. This can be changed by setting positionClass when importing the module.

ToastrModule.forRoot({
            positionClass: 'toast-top-center'
})

Disable multiple/ duplicate toastr

If you click the button multiple times you can see a lot of toastrs appear on the screen. To prevent that you can disable the duplicates.

ToastrModule.forRoot({
            preventDuplicates: true
})

Show close button in the toastr

ToastrModule.forRoot({
        closeButton:true
    })

Change the toastr dismiss time out

Default toastr will disappear after 5 seconds. This can be changed by setting timeOut property. This accepts a value as milliseconds and makes sure to convert seconds to milliseconds before adding.

ToastrModule.forRoot({
        timeOut:2000
})

Restrict no of toastrs that can be appeared at a time

If you want to show multiple toastrs and need to control the maximum numbers, maxOpened property will allow to do that.

ToastrModule.forRoot({
        maxOpened:2
})

Setting up toastr level configurations

Previously we show the way of adding different config root levels which will affect all toastrs. But you can add those in toastr level if you required different configs for different places in the app.

showToastr(){
    this.toastr.success('This is the success toastr',"Success")
    this.toastr.error('This is the error toastr',"Error",{
      timeOut:10000,
      closeButton:true
    })
  }

Connect with me - Instagram |Blog |Youtube

3 ways to Clone Array in Javascript

Ishan Fernando — Fri, 20 Nov 2020 14:25:11 +0000

As a programmer, we often need a way to copy the existing array elements to a new array. But there is some issue which can arise if you did not do it properly.

Can we assign one array to another array to copy?

In javascript, arrays consider as a reference type. That means if we assign one array to another array it does not assign the values to a new array. It only assigns the reference to the original array. Therefore if we change the element in the second array, the element in the first array also get affected.

In below example you can see even though we have added ‘Mango’ to newFruits array, both fruits and newFruits array get changed.

var fruits = ['Apple','Orange'];

var newFruites = fruits;

newFruites.push('Mango')

console.log(fruits);
//[ 'Apple', 'Orange', 'Mango' ]

console.log(newFruites);
//[ 'Apple', 'Orange', 'Mango' ]

Shallow copy vs deep copy

Before starting to learn the method of copying, we have to clarify the two-term shallow copy and the deep copy. Shallow copy only copies the first level element. That’s mean it doesn’t work for the multi-dimension array. Those are pass as a reference. But deep copy will copy the first level as well as a nested element to the new array.

Spread operator

ES6 way of copying array is using the spread operator. This is a shallow copy and does not work with the multi-dimension array.

var fruits = ['Apple','Orange'];

var newFruites = [...fruits];

console.log(newFruites);
//[ 'Apple', 'Orange' ]
newFruites.push('Mango')

console.log(fruits);
//[ 'Apple', 'Orange' ]

console.log(newFruites);
//[ 'Apple', 'Orange', 'Mango' ]

Slice method

Array Slice method also allows copying the array element. This one also a method of shallow copying. This is the old way of copying the array before the spread operator introduced.

var fruits = ['Apple','Orange'];

var newFruites = fruits.slice();

console.log(newFruites);
//[ 'Apple', 'Orange' ]
newFruites.push('Mango')

console.log(fruits);
//[ 'Apple', 'Orange' ]

console.log(newFruites);
//[ 'Apple', 'Orange', 'Mango' ]

Array from method

Array.from() static method also can use to create a copy of an array. This one also a method of shallow coping.

var fruits = ['Apple','Orange'];

var newFruites = Array.from(fruits);

newFruites.push('Mango')

console.log(fruits);
//[ 'Apple', 'Orange', 'Mango' ]

console.log(newFruites);
//[ 'Apple', 'Orange', 'Mango' ]

In because we are changing the state of the App we need use stateful widget in here.

Can we do Deep Copy for an Array of objects/Multi dimension array?

If you have an array of object or multi-dimension array these methods will not be work. In that case, you have to do a deep copy.

You can use JSON.stringify() and JSON.parse() method to copy Object array/multi-dimension array to a new one. On here, the stringify method converts the object to string and you can convert that string to JSON/Array again by using JSON.parse() method.

    var fruits = [
    {
        name:'Apple',
        color:'Red',
    },
    {
        name:'Mango',
        color:'Green',
    }
    ];

//var newFruites = fruits.slice();
var newFruites = JSON.parse(JSON.stringify(fruits));

newFruites[0]['color'] = 'Green';

console.log(fruits);
//[{ name: 'Apple', color: 'Red' }, 
   { name: 'Mango', color: 'Green' } ]

console.log(newFruites);
//[{ name: 'Apple', color: 'Green' },
    { name: 'Mango', color: 'Green' }]

Hope you got a better idea about a different way of coping array in Javascript and now you can decide which method is suitable for you. When using spread operator you have to be careful about the browser compatibility. Because it does not support IE.

Connect with me - Instagram |Blog |Twitter

Dynamic Theme in Flutter - Dark and Light Theme

Ishan Fernando — Thu, 19 Nov 2020 16:38:00 +0000

Adding Light and Dark theme for your app kind of become a mandatory thing in today's app world. Because most people prefer the dark theme over light theme because it is pretty comfortable for our eyes.

In this tutorial, we are going to implement a simple flutter app to switch between light and dart theme without much-complicated code.

First thing first, Let’s create a simple UI with a switch within it. This switch will change the variable called _light to true or false based on user interaction.

           Switch(
                  value: _light, 
                  onChanged: (toggle){

                  }),

In because we are changing the state of the App we need use stateful widget in here.

The simplest way of changing the light to dark is by changing the theme of the MaterialApp widget to light to dark. For that we need two themes like dark and light.


            ThemeData _darkTheme = ThemeData(
              accentColor: Colors.red,
              brightness: Brightness.dark,
              primaryColor: Colors.amber,

            );

            ThemeData _lightTheme = ThemeData(
              accentColor: Colors.pink,
              brightness: Brightness.light,
              primaryColor: Colors.blue
            );

When defining theme, you can select the accentColor and primaryColour based on your need . The important part is we have to mentioned the brightness whether is dark or light for each ThemeData class.

The next thing is based on the _light variable value, we can set the MaterialApp theme property to either light ThemeData object or dark one.

        MaterialApp(
              theme: _light ? _lightTheme : _darkTheme,
              title: 'Material App')

Don’t forget to apply setState to Switch widget onChange callback.


                Switch(
                  value: _light, 
                  onChanged: (toggle){
                    setState(() {
                      _light = toggle;
                    });
                  })

Now you can see the app theme get changed nicely when you toggle the switch.

Hard cording Theme values

In because we are changing theme it bettor to not hardcoding some element like text and button colours. Because some of the hard corded colours may not be properly shows in dark or light theme.

Changing Button colours

You can set the default button color by setting buttonColor property. Also if you want more control of the button to change disable colour, height, padding etc. you can create a button theme.

     ThemeData _darkTheme = ThemeData(
          accentColor: Colors.red,
          brightness: Brightness.dark,
          primaryColor: Colors.amber,

          buttonTheme: ButtonThemeData(
            buttonColor: Colors.amber,
            disabledColor: Colors.black
          )
        );

Adapt Theme based on the System Theme

If you have enabled the dark appearance of your phone you can set the default dark theme by specifying darkTheme property in MaterialApp widget. You can use the same dark Theme data object which we created previously. Now when you switch you phone to dark mode app will turn into dark mode automatically without changing. In this case switching from toggle not work in because we are forcefully changing the colour.

     MaterialApp(
          theme: _light ? _lightTheme : _darkTheme,
          title: 'Material App',
          darkTheme: _darkTheme)

Keep the selected theme persistently

If you want to keep the current theme selection even the user close the application you need to save the currently selected theme in a persistent way.

In the Flutter we can use shared preferences library to save current selected theme and check and set the theme when application get loaded.

Add the dependency and install

 dependencies:
    shared_preferences: ^0.5.7+3

 flutter pub get

Import plugin to dart code

import 'package:shared_preferences/shared_preferences.dart';

Now you can use this plugin functionality. First lets create a two methods to save and retrieve the theme values

 Future <SharedPreferences> _prefs = SharedPreferences.getInstance();

        _saveTheme() async{
            SharedPreferences pref = await _prefs;
            pref.setBool('theme', _light);
          }

          _getTheme() async{
            _lightF = _prefs.then((SharedPreferences prefs) {
                return prefs.getBool('theme') != null ? prefs.getBool('theme') : true;
            });
            _light = await _lightF;
          }

When the initState method get called you can call the _getTheme method to get the current saved theme.

 @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _getTheme();
  }

Getting the values from the shared preferences and setting the value to shared preferences happen in an asynchronous way. Therefore we need to use the FutureBuilder widget to assign the theme after the retrieving part gets completed.

Therefore you can wrap the MaterialApp widget inside FutureBuilder widget and set the future property as a _lightF variable value.

Finally, you need to call the _saveTheme method when the user changes the switch from dark to light or vice versa.


        Switch(value: _light, onChanged: (state){
                  setState(() {
                    _light = state;
                  });
                  _saveTheme();
                }),

If the application already running, stop the running process and run the application again to see the changes

Dark and Light Theme - Part 1

Dark and Light Theme - Part 2

Connect with me - Instagram |Blog |Youtube

Flutter Pin Input Screen

Ishan Fernando — Wed, 28 Oct 2020 17:29:09 +0000

This video will explain how to create a Pin input screen with the help of cool plugin.

if you are like article check here

Connect with me - Instagram |Blog |Twitter

Create a Timeline in Flutter without using a plugin

Ishan Fernando — Sat, 11 Jul 2020 13:51:25 +0000

This video will explain how to create a Timeline widget in Flutter without using the plugin from scratch.

Connect with me - Instagram |Blog |Twitter

Dynamic Theme in Flutter - Dark and Light Theme

Ishan Fernando — Mon, 06 Jul 2020 16:46:23 +0000

Check Full Article From here

Dark and Light Theme - Part 1

Dark and Light Theme - Part 2

Connect with me - Instagram |Blog |Twitter

As you a master procrastinator?

Ishan Fernando — Sat, 20 Jun 2020 18:07:52 +0000

Are you a master procrastinator? If not how did you overcome it?

Adobe XD Design to Flutter Code in 100 Seconds

Ishan Fernando — Sat, 30 May 2020 15:55:35 +0000

Convert your Adobe XD design to Flutter code instantly with this cool plugin.Check Full Article From here

Check The Video

Connect with me - Instagram |Blog |Twitter

Change the cursor using CSS and Javascript to give a unique feeling to the website

Ishan Fernando — Sun, 17 May 2020 07:46:33 +0000

Add Custom Image to the cursor

You can add a cursor to the entire page or you can change the cursor when hover a particular element easily by setting cursor property.

Set the cursor to the body tag if you need to show it everywhere. If not you can use a particular selector like class or id to add a cursor to only that class or id.

Change cursor of the entire page

 body{
            cursor: url('covid.png'),auto;
        }

Change cursor when hovering a particular tag

 p:hover{
            cursor: url('covid.png'),auto;
        }

Add custom style using css

If you need to add some fancy css stuff to cursor there is no a straight forward way to do that. What you need to do is hide a cursor and add small div and make that div to cursor.

First, Let’s add a div and set an id property as a cursor to that. After setting that, you can add some style to that div. For this, I am going to add a round shape style with some colour and make a middle transparent. Now when you reload the page you can see a small div which we styled.

Next thing you need to do is move this div when we move the mouse cursor. For that, we need to capture the mouse movement. For the capturing part, we need Javascript.

Let’s add that with Javascript. First, you need to register the mouse move listener. This listener will trigger every time when you move the mouse here and there. When move movement occurs, you can access the current position of the movement by X and Y coordinate. What we need to do is get those position values and set the div X and Y position based on that. Now you can see that div get moved properly.

   #cursor{
            width: 30px;
            height: 30px;
            background-color:rgba(250, 128, 114, 0.774);
            position: absolute;
            border-radius: 50%;
            border: 2px solid #fa8072;
            transform: translate(-50%,-50%);
        }

    <body>
        <div id="cursor" ></div>
    </body>

   window.addEventListener("mousemove",function(e){
        document.getElementById("cursor").style.left = e.pageX;
        document.getElementById("cursor").style.top = e.pageY;
    })

Fix click not get trigger issue in the custom cursor

When you try to click a link by using this custom cursor, you may have experienced it does not work as expected. But there is a quick and easy solution for that. All you have to do is set the pointer-event property in cursor to none. Now you can see all the stuff working as expected.

#cursor{
            width: 30px;
            height: 30px;
            background-color:rgba(250, 128, 114, 0.774);
            position: absolute;
            border-radius: 50%;
            border: 2px solid #fa8072;
            transform: translate(-50%,-50%);
            pointer-events: none;
        }

Originally published at mightytechno

Connect with me - Instagram |Blog |Twitter

Create a Triangle shape using CSS

Ishan Fernando — Sat, 04 Apr 2020 06:45:25 +0000

Have you ever wondering how to create a triangle by only using css and HTML? If you already know but doesn’t have an idea to implement that properly this article is for you.

Let’s create a 100 x 100 div and make it colour black. Then try to add 4 different colours to borders like green, yellow, red, purple.

Now you can see a square with 4 borders. Check the shape of the border. It’s like an angle in both corners. Then we can set the width and height to zero to keep only the borders. And remove the background colour. Now you can see a small square with 4 triangle shapes right?

 .triangle{
            width:0px;
            height:0px;
            background:black;
            border:20px solid;
            border-top-color: red;
            border-left-color: green;
            border-right-color: blue;
            border-bottom-color: purple;
        }
  <div class="triangle"></div>

Now you need only need to change the colours to transparent and keep only the required shape.

Right triangle

keep the colour of the left border and make other transparent.

       .triangle-right{
            width:0px;
            height:0px;
            border:10px solid;
            border-top-color: transparent;
            border-left-color: green;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        <div class="triangle-right"></div>

Top triangle

keep the colour of the bottom border and make other transparent.

      .triangle-top{
            width:0px;
            height:0px;
            border:10px solid;
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: purple;
        }
        <div class="triangle-top"></div>

Left triangle

keep the colour of the right border and make other transparent.

       .triangle-left{
                width:0px;
                height:0px;
                border:10px solid;
                border-top-color: transparent;
                border-left-color: transparent;
                border-right-color: blue;
                border-bottom-color: transparent;
        }
        <div class="triangle-left"></div>

Bottom triangle

keep the colour of the top border and make other transparent.

        .triangle-bottom{
            width:0px;
            height:0px;
            border:10px solid;
            border-top-color: red;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        <div class="triangle-bottom"></div>

Increase the size of the triangle.

By changing the border size, you can increase the size of the triangle

      .triangle-right{
            width:0px;
            height:0px;
            border:20px solid;
            border-top-color: transparent;
            border-left-color: green;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        <div class="triangle-right"></div>

Rotate triangle.

You can use transform property set the rotation as you need.

        .triangle-rotate{
            width:0px;
            height:0px;
            border:10px solid;
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: purple;
            transform: rotate(20deg);
        }
        <div class="triangle-rotate"></div>

Add a triangle to end of div

Adding triangle to end of the div sometimes seems confusing. You can use :after selector to add a style to the end of a div. When adding an arrow to bottom we need to keep the top border and make other borders transparent. In this div, the width has been set as 100px. Then the left and the right border have to be half of size of the div. Also by changing the top border height, you can change the height of the triangle.

        .triangle-after{
            width: 100px;
            height: 50px;
            background: black;
            position: relative;
        }

        .triangle-after:after{
            content: "";
            position: absolute;
            width:0;
            height:0;
            top: 100%;
            border-top: solid 10px #e15915;
            border-left: solid 50px transparent;
            border-right: solid 50px transparent;
            border-bottom: solid 10px transparent;
        }
        <div class="triangle-after"></div>

Originally published at mightytechno

Connect with me - Instagram |Blog |Youtube

Flutter show and hide widget with Fade animation

Ishan Fernando — Sat, 28 Mar 2020 04:43:01 +0000

In build animation support provided by flutter is pretty powerful and most of the case no need to implement custom widget to do your job.

No exceptional, adding show and hide animation are the same. Flutter provides AnimatedOpacity Widget to change the opacity of the widget when show and hide in progress. It will linearly change the opacity and you can change the curve (how the animation should happen) by setting values like bounceIn, easeInOut etc.

The main property which you need to set is opacity. If you set the opacity to 1 it means it shows the child widget in full opaque. If you set the opacity to 0 it means it fully transparent and you will not be able to see the widget.

This is the code for adding fade animation when show and hide.

       AnimatedOpacity(
             opacity: loading ? 0 : 1 ,
             curve: Curves.easeInOut,
             duration: Duration(milliseconds: 500),
             child: Container(
               width: 200,
               height: 200,
               color: Colors.blueAccent,
             ),
          )

In here what we do is we are changing the loading value to false when using press the floating button and inside the AnimatedOpacity it checks the value of the loading variable. If it is true we set 0 and if not we set it as 1. Now run the code and check how the animation happen.

Does widget get removed when opacity zero?

The widget will not get removed when opacity is 0. It just changes the opacity and widget will take the required space of the widget tree.

We can verify this by adding 3 Flexible widgets inside a column and add an AnimationOpacity widget as a middle one. If the widget gets removed when opacity becomes 0, top and bottom widget has to come near each other. But you can see it keep the remaining space.

Column(
      children: [
              Flexible(
                     child: Container(
                     height: 200,
                     color: Colors.red,
                     )),
               Flexible(
                     child: AnimatedOpacity(
                     opacity: loading ? 0 : 1,
                     curve: Curves.easeInOut,
                     duration: Duration(milliseconds: 500),
                     child: Container(
                          color: Colors.greenAccent,
                          height: 200,
                          ),
                         ),
                      ),
                Flexible(
                     child: Container(
                     height: 200,
                     color: Colors.blueAccent,
                     ))
               ],
        )

Before setting opacity.

After making opacity 0. It keeps space.

Originally published at mightytechno

Connect with me - Instagram |Blog |Twitter