ShilpaLalwani

import {Component, Input,Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: 'card.component.html',
  styleUrls: ['card.component.scss'],
})
export class CardComponent {
   @Input() title: string;
  @Input() subTitle: string;

ShilpaLalwani

import { NgModule ,Injector, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faHeart, faShareSquare } from '@fortawesome/free-regular-svg-icons';

import { MaterialModule } from './material-module';
import { CardComponent } from './card/card.component'

@NgModule({

ShilpaLalwani

<custom-card
      title="Custom Element"
      sub-title="Donna Marshall"
      caption="Lorem ipsum dolor sit, amet consectetur adipisicing elit."
      avtar="https://uinames.com/api/photos/female/15.jpg"
      image="https://images.pexels.com/photos/169193/pexels-photo-169193.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"
    >
     
</custom-card>
  <script>

ShilpaLalwani

import {
  Injectable,
  ComponentFactoryResolver,
  ViewContainerRef
} from '@angular/core';
import { from } from 'rxjs';
import { map } from 'rxjs/operators';

export interface ComponentLoader {
  loadChildren: () => Promise<any>;

ShilpaLalwani

import { Injectable,ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ProfileService {
  private isLoggedIn = new BehaviorSubject(false);
  isLoggedIn$ = this.isLoggedIn.asObservable();

  constructor(private cfr: ComponentFactoryResolver) {}

ShilpaLalwani

<section class="mt-5 card p-3">
  
    <h2 class="card-title">Guest Profile</h2>

    <p class="card-subtitle">
      Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken.
    </p>

    <div class="mt-3 text-center mb-3">
      <button class="btn btn-primary" (click)="login()">Login</button>

ShilpaLalwani

import { Component } from '@angular/core';
import { ProfileService } from '../profile.service';

@Component({
  selector: 'app-guest-card',
  templateUrl: './guest-card.component.html',
  styleUrls: ['./guest-card.component.css']
})
export class GuestProfileComponent {
  constructor(private profileService: ProfileService) {}

ShilpaLalwani

<section class="card p-3 mt-5">
  <figure class="text-center">
    <img src="assets/profile.jpg" />
  </figure>
<div class="card-body">

  <h2 class="card-title" >Lorem ipsum</h2>

  <p class="card-subtitle" >
      Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken.

ShilpaLalwani

import { Component } from '@angular/core';
import { ProfileService } from '../profile.service';

@Component({
  selector: 'app-user-card',
  templateUrl: './user-card.component.html',
  styleUrls: ['./user-card.component.css']
})
export class ClientProfileComponent {
  constructor(private profileService: ProfileService) {}

ShilpaLalwani

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[appProfileHost]' })
export class ProfileHostDirective {
  constructor(public viewContainerRef: ViewContainerRef) {}
}