DEV Community: Ram Kota

ViewChild, ViewChildren and ContentChild, ContentChildren are undefined in Angular Material Dialog

Ram Kota — Sun, 21 Nov 2021 13:05:16 +0000

I have a Angular Material Dialog Component that takes Inputs and uses them in header and footer of modal. I want to pass some html elements in modal's body section from another component.

I want to have a reference of child elements of a component in that component. I have tried both ElementRef, TemplateRef and QueryList with ViewChild, ViewChildren, ContentChild, ContentChildren but no luck.

dashboard.component.html displays a 'show/hide columns' button.

dashboard.component.html

<app-modal [title]="title" [btnText]="text'>
   <section #template>
    <mat-form-field appearance="outline" *ngIf="!showForm && viewParams.length > 0 && cn_hostname_index >= 0">
      <mat-label>Search Columns</mat-label>
      <input 
        matInput
        id="columnSearchTxt"
        placeholder="Search Columns"
        name="columnSearchTxt"
        [(ngModel)]="colSearch.title"
      />
      <button *ngIf="colSearch.title" (click)="colSearch.title = ''" mat-icon-button matSuffix (click)="searchHosts()" matTooltip="Filter on hostname">
        <mat-icon aria-hidden="false" aria-label="Clear">close</mat-icon>
      </button>
    </mat-form-field>

    <mat-slide-toggle
      *ngFor="let col of colDefs | filter: 'title':colSearch.title"
      color="primary"
      [name]="col.title"      
      [(ngModel)]="col.includeField"
      labelPosition= "before"
    >
      {{ col.title }}
    </mat-slide-toggle>
   </section>
</app-modal>

I want a complete reference of section element along with its children as html elements. So that I can send the same ref to another component and display as innerHTML in dev.

modal.component.ts

import { Component, Inject, Input, TemplateRef, ViewChild, ContentChild, ElementRef } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

export interface DialogData {
  title: string;
  text: string;
  template: TemplateRef<any>
}

@Component({
  selector: 'app-modal',
  template: `<button mat-raised-button (click)="openDialog()">{{ btnText }}</button>`,
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent {

  @Input() btnText: string;
  @Input() id: string;
  @Input() modalTitle: string;
  @Input() okText: string;
  @Input() name: string;
  // @ContentChild('template') template: TemplateRef<any>;
  // @ContentChild('template') template: ElementRef<any>;
  // @ViewChild('template') template: TemplateRef<any>;
  @ViewChild('template') template: ElementRef;

  constructor(public dialog: MatDialog) { }

  openDialog(): void {
    const dialogRef = this.dialog.open(ModalDialogComponent, {
      data: {
        id: this.id, 
        title: this.modalTitle, 
        text: this.okText, 
        name: this.name,
        template: this.template
      },
    });
  }

}

@Component({
  selector: 'modal-dialog',
  templateUrl: './modal-dialog.component.html',
})
export class ModalDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<ModalDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData,
  ) {}

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

modal-dialog.component.html

<section>
    <div>
        <mat-icon (click)="onNoClick()" aria-hidden="false" aria-label="close icon">close</mat-icon>
    </div>
    <h1 mat-dialog-title>{{ data.title }}</h1>
    <div mat-dialog-content>
        <!-- Want to display html elements from app-modal -->
    </div>
    <div mat-dialog-actions>
        <button mat-button (click)="onNoClick()">{{ data.text ? data.text : 'Ok' }}</button>
    </div>
</section>

How to reuse Angular Material Dialog with dynamic content

Ram Kota — Sat, 20 Nov 2021 16:42:25 +0000

I have a Angular Material Dialog Component that takes Inputs and uses them in header and footer of modal. I want to pass some html elements in modal's body section from a component.

dashboard.component.html displays a 'show/hide columns' button.

dashboard.component.html

<app-modal [title]="title" [btnText]="text'>
   <section #template>
    <mat-form-field appearance="outline" *ngIf="!showForm && viewParams.length > 0 && cn_hostname_index >= 0">
      <mat-label>Search Columns</mat-label>
      <input 
        matInput
        id="columnSearchTxt"
        placeholder="Search Columns"
        name="columnSearchTxt"
        [(ngModel)]="colSearch.title"
      />
      <button *ngIf="colSearch.title" (click)="colSearch.title = ''" mat-icon-button matSuffix (click)="searchHosts()" matTooltip="Filter on hostname">
        <mat-icon aria-hidden="false" aria-label="Clear">close</mat-icon>
      </button>
    </mat-form-field>

    <mat-slide-toggle
      *ngFor="let col of colDefs | filter: 'title':colSearch.title"
      color="primary"
      [name]="col.title"      
      [(ngModel)]="col.includeField"
      labelPosition= "before"
    >
      {{ col.title }}
    </mat-slide-toggle>
   </section>
</app-modal>

modal.component.ts

import { Component, Inject, Input, TemplateRef, ViewChild } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

export interface DialogData {
  title: string;
  text: string;
  template: TemplateRef<any>
}

@Component({
  selector: 'app-modal',
  template: `<button mat-raised-button (click)="openDialog()">{{ btnText }}</button>`,
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent {

  @Input() btnText: string;
  @Input() id: string;
  @Input() modalTitle: string;
  @Input() okText: string;
  @Input() name: string;
  @ViewChild('template') template: TemplateRef<any>;

  constructor(public dialog: MatDialog) { }

  openDialog(): void {
    const dialogRef = this.dialog.open(ModalDialogComponent, {
      data: {
        id: this.id, 
        title: this.modalTitle, 
        text: this.okText, 
        name: this.name,
        template: this.template
      },
    });
  }

}

@Component({
  selector: 'modal-dialog',
  templateUrl: './modal-dialog.component.html',
})
export class ModalDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<ModalDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData,
  ) {}

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

modal-dialog.component.html

<section>
    <div>
        <mat-icon (click)="onNoClick()" aria-hidden="false" aria-label="close icon">close</mat-icon>
    </div>
    <h1 mat-dialog-title>{{ data.title }}</h1>
    <div mat-dialog-content>
        <!-- Want to display html elements from app-modal -->
    </div>
    <div mat-dialog-actions>
        <button mat-button (click)="onNoClick()">{{ data.text ? data.text : 'Ok' }}</button>
    </div>
</section>

How to display a navbar component after logging in without reloading the page in angular 12

Ram Kota — Sat, 13 Nov 2021 16:11:17 +0000

My landing page does not show a navbar, but I want to display a navbar after logging in successfully. Currently, I'm able to show navbar if I do a full page reload after logging in successfully. I'm very sure that there is a better way than this approach.

app.component.html

<app-navbar></app-navbar>
<router-outlet></router-outlet>

login.component.ts

login(){
    this.credentials = this.myForm.value;
    if(this.credentials){
      this.loginService.authenticate(this.credentials)
      .subscribe(data => {
        this.storageService.setLocalStorageItem('auth', JSON.stringify(data));
        this.dataService.global.showNav = true;
        this.sharedService.getProjectMetadata()
        .subscribe(metadata => {
          this.storageService.setLocalStorageItem('projectMetaData', JSON.stringify(metadata));
          this.router.navigate(['/home']);
        })
      }, err => console.log(err));
    } else {
      console.log('Please enter your username and password');
    }
  }

data.service.ts

import { Injectable } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { IGlobal, IMessage } from '../../Shared/interfaces';
import { MessageCallback } from '../../Shared/types';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor() { }

  date: string = (new Date()).toString();

  global: IGlobal = {
    showNav: false,
    sessionTimedOut: false,
    timezone: this.date.substring(this.date.indexOf('GMT')),
    projectMetaData: {
      name: ''
    },
    isAdmin: false,
    auth: {
      roles: {
        admin: false,
        developer: false
      }
    }
  }

  private handler: Subject<IMessage> = new Subject<IMessage>();

  broadcast(type: string, payload: any){
    this.handler.next({type, payload});
  }

  subscribe(type: string, callback: MessageCallback): Subscription {
    return this.handler.pipe(filter(message => message.type === type), map(message => message.payload))
                        .subscribe(callback);
  }
}

navbar.component.html

<mat-toolbar fxLayout="row" color="primary" *ngIf='showNavbar'></mat-toolbar>

navbar.component.ts

export class NavbarComponent implements OnInit {
  user: IAuth = {};
  showNavbar: boolean;
  progressbar: number = 0;

  constructor(
    private storageService: StorageService,
    private dataService: DataService
  ) { 
    this.showNavbar = this.dataService.global.showNav;
  }

  ngOnInit(): void {
    this.user = JSON.parse(this.storageService.getLocalStorageItem('auth'));
    if(this.user){
      this.showNavbar = true;
    }
  }

}

Please help me out. Your help is highly appreciated. Thank you.

Need help with private chat using MERN stack and socket.io

Ram Kota — Fri, 04 Sep 2020 15:01:45 +0000

I'm developing a private chat application using MERN stack and socket.io.

I'm able to send a private message to a specific user successfully but not able to include the message sender to show to both the users.

I need help to include the sender along with the message to show to both the users. And I also want to append the messages properly since the above code is overriding the previous message.

Client

export default function Chat({ users }) {
    const [activeUser, setActiveUser] = useState('');
    const [currentUser, setCurrentUser] = useState(null);
    const [filteredList, setFilteredList] = useState([]);
    const [message, setMessage] = useState('');
    const [chats, setChats] = useState([]);

    useEffect(() => {
        const jwt = isAuthenticated().user;
        setCurrentUser(jwt);
        config.socket;
        config.socket.on('isOnline', (data) => {
            console.log(data);
        });
    }, []);

    useEffect(() => {
        const list = users.filter(user => currentUser ? user._id !== currentUser._id : user._id);
        setFilteredList(list);
    }, [currentUser]);

    useEffect(() => {
        config.socket.on('chat', (data) => {
            setChats([...chats, data]);
        });
    }, []);

    const changeActiveUser = (e, user) => {
        e.preventDefault();
        console.log(`changeActiveUser ${JSON.stringify(user)}`);
        setActiveUser(user);
    };

    const handleClick = e => {
        e.preventDefault();
        const msg = {
            socketId: activeUser.socketId,
            to: activeUser._id,
            toUser: activeUser.username,
            message: message,
            from: currentUser._id
        }
        // config.socket.emit('join', {id: activeUser.socketId, username: activeUser.username})
        console.log(`Private MSG ${JSON.stringify(msg)}`);
        config.socket.emit('private', msg);
        setMessage('');
    }


    return (
        <>
            <div className='container'>
                <div className='row'>
                    <div className='col-3 leftSide'>
                        {filteredList.map((user) => (
                            <li key={user._id} className={`list ${user._id === activeUser._id ? 'active' : ''}`} onClick={e => changeActiveUser(e, user)}>
                                <img className='userImg' src={user.gender === 'Female' ? '/female.jpg' : '/male.jpg'} /> {user.name} <small>&nbsp;({user.username})&nbsp;<span>{user.online ? 'online' : 'offline'}</span></small>
                            </li>
                        ))}
                    </div>
                    <div className='col-9 rightSide'>
                        <div className='row'>
                            <div className='col rightTop'>
                                <h1>{activeUser.username ? `${activeUser.username} (${activeUser._id})` : 'Start a chat!'}</h1>
                                <ul>
                                    {chats && chats.map((chat, i) => (
                                        <li key={i}>
                                            <span>{activeUser._id === chat.from ? <span style={{ float: 'left' }}>{`${activeUser.username}: ${chat.message}`}</span> : <span style={{ float: 'right' }}>{`Me: ${chat.message}`}</span>}</span>
                                            {/* <div>{activeUser._id === chat.to ? <div style={{ float: 'right' }}>{`Me: ${chat.message}`}</div> : ''}</div> */}
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                        <hr />
                        {activeUser && (
                            <div className='row rightBottomContainer'>
                                <div className='rightBottomInput'>
                                    <input value={message} type='text' onChange={(e) => setMessage(e.target.value)} placeholder=' Enter your chat...' />
                                </div>
                                <div className='rightBottomButton'>
                                    <button onClick={(e) => handleClick(e)} type='submit'>Send</button>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </>
    );
}

Server

const users = {};

io.on('connection', (socket) => {
  console.log(`${socket.id} connected`);

  socket.on('signin', (data) => {
    users[data.username] = data.socketId;
    socket.emit('isOnline', { userId: data.userId, online: true });
  });

  console.log(`USERS: ${JSON.stringify(users)}`);

  // socket.on('join', (data) => {
  //   console.log(`JOIN: ${JSON.stringify(data)}`);
  //   socket.join(data.id);
  // });

  socket.on('private', (msg) => {
    console.log(`users[msg.toUser] ${users[msg.toUser]} === msg.socketId ${msg.socketId}`);
    if (users[msg.toUser] === msg.socketId) {
      console.log(msg);
      io.to(msg.socketId).emit('chat', msg);
    }
  });

  socket.on('disconnect', () => {
    console.log(`${socket.id} disconnected`);
  });
});

I have also posted the issue in stackoverflow.

Any help is highly appreciated.
Thanks in advance.