CODEWITHSUNDEEP
angularangular-material
user12293811
user12293811

Reputation:

injecting a component into a component in angular 8 referencing angular material as example

I am using Angular Material for my angular project for UI functionality.

In an example angular has the following code as an example of referencing a component in a component. 

import {Component} from '@angular/core';
import {MatBottomSheet, MatBottomSheetRef} from '@angular/material/bottom-sheet';

/**
 * @title Bottom Sheet Overview
 */
@Component({
  selector: 'bottom-sheet-overview-example',     <----- there is component 1
  templateUrl: 'bottom-sheet-overview-example.html',
  styleUrls: ['bottom-sheet-overview-example.css'],
})
export class BottomSheetOverviewExample {
  constructor(private _bottomSheet: MatBottomSheet) {}

  openBottomSheet(): void {
    this._bottomSheet.open(BottomSheetOverviewExampleSheet);
  }
}

@Component({                                          <--- oh look component 2 
  selector: 'bottom-sheet-overview-example-sheet',
  templateUrl: 'bottom-sheet-overview-example-sheet.html',
})
export class BottomSheetOverviewExampleSheet {
  constructor(private _bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>) {}

  openLink(event: MouseEvent): void {
    this._bottomSheetRef.dismiss();
    event.preventDefault();
  }
}

two components in the same file. Cute for a demo but terrible in practice. So I created two components and injected one into the other.

Here is my code. A ts file of one component which the component below this code is being injected into this one in the constructor. 

import { Component, OnInit } from '@angular/core';
import {MatBottomSheet} from '@angular/material';
import {VideorequestbottomsheetComponent} from './bottomsheets/videorequestbottomsheet/videorequestbottomsheet.component';

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

  constructor( private bottomsheet: MatBottomSheet,
               private videorequestbottomsheet: VideorequestbottomsheetComponent) { }


  openBottomSheet():void{
    this.bottomsheet.open(this.videorequestbottomsheet);

  }
  ngOnInit() {
  }

}

component being injected into the first above

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

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

  constructor(private bottomsheetref: MatBottomSheetRef<VideorequestbottomsheetComponent>) { }

  ngOnInit() {
  }

}

now all seems well and should be working but I am getting this error:

ERROR in ../bottomsheetshell.component.ts(17,27): error TS2345: Argument of type 'VideorequestbottomsheetComponent' is not assignable to parameter of type 'TemplateRef<unknown>'.
      Type 'VideorequestbottomsheetComponent' is missing the following properties from type 'TemplateRef<unknown>': elementRef, createEmbeddedView

so the thing wants a template ref but isn't that what I gave it? I mean my code is the exact same as the example, save for one component being in another file.

And the second error. It is getting its TemplateRef from it being inherited by the MatBottom.

Upvotes: 0

Views: 777

Answers (1)

Tushar
Tushar

Reputation: 2078

You don't have to inject the bottomsheet component, since it is not a service. You can use it directly in the this.bottomsheet.open function like this :

this.bottomsheet.open(VideorequestbottomsheetComponent);

and remove it from constructor.

Upvotes: 1

Related Questions