How to add @angular/platform-browser to a material pop up dialog

Question

I'm trying to implement a list of users in a material design popup but I keep getting this error:

Can't bind to 'ngForOf' since it isn't a known property of 'ion-list'.

After further research it appears it's caused by not importing import { BrowserModule } from '@angular/platform-browser'; into the component's module. The problem is that this is a pop up dialog and it doesn't have a ngModule. How would I import import { BrowserModule } from '@angular/platform-browser'; to this component?

here is the component:

import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { AlertController } from '@ionic/angular';
import { GroupService } from '../services/groups/group.service';
import { AngularFirestore } from 'angularfire2/firestore';

@Component({
  selector: 'app-search-dialog',
  templateUrl: './search-dialog.component.html',
  styleUrls: ['./search-dialog.component.scss'],
})
export class SearchDialogComponent implements OnInit {
  sampleArr = [];
  resultArr = [];
  groupInfo: any;

  constructor(public dialogRef: MatDialogRef<SearchDialogComponent>,
              public afs: AngularFirestore,
              private groupSvc: GroupService,
              private alertController: AlertController) { }

  ngOnInit() {}

  search(event) {
    this.sampleArr.length = 0;
    let searchKey: string = event.target.value;
    let firstLetter = searchKey;

    if (searchKey.length === 0) {
      this.sampleArr = [];
      this.resultArr = [];
      console.log('searchKey', searchKey.length);
      console.log('this.sampleArr', this.sampleArr);
    }

    if (this.sampleArr.length === 0) {
      console.log('searchKey', searchKey.length);
      console.log('this.sampleArr', this.sampleArr);
      this.afs.collection('users', ref => ref
      .where('displayName', '>=', firstLetter)
      .where('displayName', '<=', firstLetter + '\uF7FF')
      .orderBy('displayName'))
        .snapshotChanges().subscribe(data => {
          data.forEach(childData => {
            this.sampleArr.push(childData.payload.doc.data());
          });
        });
    }
  }

  onNoClick(): void {
    this.dialogRef.close();
  }
}

<ion-content padding>
  <ion-searchbar style="background-color: white; color: black;" (ionInput)="search($event)"></ion-searchbar>

  <ion-list *ngFor="let user of sampleArr" (click)="sendUserRequest(user)">
    <ion-avatar style="padding-right: 10px;">
      <img [src]="user.profilePic" alt="" srcset="">
    </ion-avatar>
    <ion-label>
      <ion-note style="font-weight:bold; color: black;">
        Send request to
      </ion-note>  
      <ion-note style="font-weight:bold; color: black;">
        {{user.displayName}}
      </ion-note>  
    </ion-label>
  </ion-list>
</ion-content>

When I type in the search bar I can see in the console log where it's retrieving the users from the backend but it's just not populating the list with data.

I added an ngModule file to the search component folder but still have the same issue:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';
import { BrowserModule } from '@angular/platform-browser';
import { MaterialModule } from 'src/app/material.module';
import { SearchDialogComponent } from './search-dialog.component';

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    IonicModule,
    MaterialModule,
  ],
  declarations: [SearchDialogComponent],
  entryComponents: [SearchDialogComponent],
  exports: [SearchDialogComponent]
})
export class SearchDialogModule {}

Pankaj Sati Pankaj Sati · Accepted Answer · 2020-09-25T05:06:53

Its not the @angular/platform-browser, you need to import the IonicModule . For that ,you need to create the module file for that component with @NgModule decorator:

Inside the folder of your component, just create a new .ts file usually .module.ts. This module file will tell angular about your component and libraries it depends on.

@NgModule(
    {
        declarations:[SearchDialogComponent],

        imports:[IonicModule,
        CommonModule],

        entryComponents:[SearchDialogComponent],

        exports: [SearchDialogComponent]
    })
export class SearchComponentModule{}

How to add @angular/platform-browser to a material pop up dialog

1 Answers