Code2night
  • Home
  • Blogs
  • Tutorial
  • Post Blog
  • Tools
    • Json Beautifier
    • Html Beautifier
  • Members
    • Register
    • Login
  1. Home
  2. Blogpost
13 Dec
2022

Angular Material Select Dropdown with Image

by Shubham Batra

680

Download Attachment

Step 1: Create New App

 ng new app-material 

Step 2: Add Material Design

Now you have to install the material library in the angular app. So, we can use angular material components:

 ng add @angular/material

Step 3: Import Module

first, we need to import MatFormFieldModule and MatSelectModule. so let's update app.module.ts.

Let's follow the steps:

src/app/app.module.ts

 import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { MatSelectModule, MatFormFieldModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DropdownComponent } from './dropdown/dropdown.component';

@NgModule({
  declarations: [
    AppComponent,
    DropdownComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    MatSelectModule,
    MatFormFieldModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Create a new component

ng g c dropdown   

Here, you have to update the HTML template file as below:

src/app/dropdown.component.html

<div class="container">
    <h4>Angular Material Select with Image Example</h4>

    <mat-form-field appearance="fill">
        <mat-select placeholder="Select Categories">
            <mat-option *ngFor="let category of categories" [value]="category.id">
                <img with="20" height="20" [src]="category.image">
                {{category.value}}
            </mat-option>
        </mat-select>
    </mat-form-field>
</div>

Step 5: Update Ts File

Here, you have to update the ts file as below:

src/app/dropdown.component.ts

import { Component, OnInit } from '@angular/core';

interface Category {
  id: string;
  value: string;
  image: string;
}

@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.scss']
})
export class DropdownComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  categories: Category[] = [
    { id: '1', value: 'JS', image: 'https://www.itsolutionstuff.com/category-images/javascript.svg' },
    { id: '2', value: 'Git', image: 'https://www.itsolutionstuff.com/category-images/git.png' },
    { id: '3', value: 'Laravel', image: 'https://www.itsolutionstuff.com/category-images/laravel.svg' },
    { id: '4', value: 'Bootstrap', image: 'https://www.itsolutionstuff.com/category-images/bootstrap.svg' },
    { id: '5', value: 'Angular', image: 'https://www.itsolutionstuff.com/category-images/angular.svg' },

  ];
}

Here, you have to update the app.component.html file as below:

we have to call the dropdown component in the app component 

<app-dropdown></app-dropdown>

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

 ng serve --open

Now, Go to your web browser, type the given URL and view the app output:

 http://localhost:4200

Output


  • |
  • Angular Material Select Dropdown with Image

Comments

Follow Us On Social Media - Like Us On Facebook

Best Sellers

product 1

Hand Hug Bracelet For Women Men Cuff Bangle Adjustable Lover Couple Bracelets

Can be given as a gift to your family, relatives, or friends

Buy $15.99
product 1

Teddy bear hug bear plush toy bear cub

Can be given as a gift to your family, relatives, or friends


Buy $49.99

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Thank you for Downloading....!

Subscribe for more tutorials

Support our team

Continue with Downloading

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2023 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier