Campaign Display Component

campaign-display.component.html

<div class='hero'>
    <div class='hero-overlay'>
        <main>
            <div>{{campaign.signupMessage}}</div>
            <button class='btn-sign-up'(click)='buttonClicked()'>Click Here To Sign Up</button>
        </main>
    </div>
    <img *ngIf="campaign.heroImageUrl" class='hero-image' [src]='campaign.heroImageUrl' alt='Campaign Image'/>
</div>

campaign-display.component.ts

export class CampaignDisplayComponent implements OnInit {
  @Input() campaign: Campaign;
  @Output() signupButtonClicked: EventEmitter<boolean> = new EventEmitter<boolean>();

  public heroImage = '';
  public campaignDetails = 'This is some default text. If you are seeing this, your campaign is missing the signup message data.';
  constructor(private campaignService: CampaignService) { }

  ngOnInit(): void {
    this.heroImage = this.campaign.heroImageUrl;
    this.campaignDetails = this.campaign.signupMessage;
  }

  public buttonClicked(): void {
    this.signupButtonClicked.emit(true);
  }

}