Steps to set angular for all items in the dropdown menu:

Question

Steps to set angular for all items in the dropdown menu:

I am currently working on implementing a dropdown feature within my Angular application. The dropdown will display a list of shops, and when a shop is selected, it will show the content related to that particular shop. I need to add a new item called "ALL SHOP" to the shop list in the dropdown.

https://i.stack.imgur.com/X7A4n.png The data for the shop lists is retrieved from a database using Angular with a Web API.

Below is my TypeScript code:

 ngOnInit() {

            this.Service.FetchPopulateOutlets().subscribe(outletsData => this.outletDetails = outletsData,
                error => {


 console.error(error);
                this.statusMessage = "Problem with the service.Please try again after sometime";
            });
    onSelect(shopid: number) {
    this.Service.FetchItemDetails(shopid, this.pageIndex).subscribe(itemsData => this.itemdetails = itemsData,
                        error => {
                            console.error(error);
                            this.statusMessage = "Problem with the service.Please try again after sometime";
                        });

And here is my HTML code:

  <span>
            <select class="formcontrol" name="outletDetail" (change)="onSelect($event.target.value)">
                <option value="0" disabled>Select a Shop</option>
                <option *ngFor="let outletDetail of outletDetails" value={{outletDetail.ShopID}}>{{outletDetail.ShopName}}</option>
            </select>

angular typescript angular2-template angular2-forms angular2-services

Answer 1

Answer №1

ngOnInit() {
    this.Store.GetDataFromServer().subscribe(data => {
        let allProducts = {
            ProductName: 'All',
            ProductID: 0
        }
        this.productDetails = [allProducts, ...data];
    }, error => {
        console.log(error);
        this.message = "Issue with the service. Please try again later.";
    });
    onSelect(productid: number) {
        if (productid == 0) {
            "Implement your logic here"
        }
        this.Store.FetchProductDetails(productid, this.pageIndex).subscribe(detailsData => this.productdetails = detailsData,
            error => {
                console.log(error);
                this.message = "Issue with the service. Please try again later.";
            });
    }

Answer 2

ngOnInit() {
    this.Store.GetDataFromServer().subscribe(data => {
        let allProducts = {
            ProductName: 'All',
            ProductID: 0
        }
        this.productDetails = [allProducts, ...data];
    }, error => {
        console.log(error);
        this.message = "Issue with the service. Please try again later.";
    });
    onSelect(productid: number) {
        if (productid == 0) {
            "Implement your logic here"
        }
        this.Store.FetchProductDetails(productid, this.pageIndex).subscribe(detailsData => this.productdetails = detailsData,
            error => {
                console.log(error);
                this.message = "Issue with the service. Please try again later.";
            });
    }

Steps to set angular for all items in the dropdown menu:

Answer №1

Similar questions

Familial Connection (TYPESCRIPT)

Is there a way to prevent QtLinguist from opening every time Visual Studio tries to display a TypeScript file?

Is there a way to automate downloading a file in Angular using the browser's built-in download feature?

Ways to incorporate forms.value .dirty into an if statement for an Angular reactive form

Angular: adding a component to the root module

Tips for arranging TypeScript AST nodes and generating a TypeScript file as the final result

Press the second form submit button after the completion of another Observable

"Troubleshooting the placement problem in Angular Material's md-menu

The 'Access-Control-Allow-Origin' header can be found on the resource that was requested

What could be the reason my RxJS Observable chain does not run again when new emissions are made?

What is the best way to perform this task in Angular2?

`ng build`: transferring scripts to a subdirectory

MikroORM - Conditional join without foreign key constraints on the ID

At what point is a service generated through dependency injection?

Fetching an image from a fixed storage location with the help of Express JS in Angular 2

Incorporate TypeScript with Angular 2 to construct a dictionary with <key, value> pairs. Then, utilize a JSON file to populate the dictionary with data

Unable to bring in the directive from the Angular library

The Router.url function consistently returns a forward slash instead of the actual current URL

Piwik causing runtime errors in Angulartics2 build

Ways to simulate a dependent class in TypeScript & JEST without modifying constructor parameters to optional