Angular Material Select Dropdown with Image | Code2night.com
Code2night
  • Home
  • Blogs
  • Tutorial
  • Post Blog
  • Members
    • Register
    • Login
  1. Home
  2. Blogpost
13 Dec
2022

Angular Material Select Dropdown with Image

1375

Subscribe Youtube & Download free Pay & Download

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

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
Free Download for New Subscribers!

Subscribe and Click on Verify and Download for download link

Subscribe Now | 605
Download
Support Us....!

Please Subscribe to support us

Thank you for Downloading....!

Please Subscribe to support us

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