Creating a completely dynamic button in Angular 6: A step-by-step guide

Question

Creating a completely dynamic button in Angular 6: A step-by-step guide

I have been working on creating dynamic components for my application, allowing them to be reusable in different parts of the program. At this point, I have successfully developed text inputs that can be dynamically added and customized using the componentFactory within a form, and they are functioning perfectly.

Now, I am facing the challenge of developing fully dynamic buttons that can also be customized when inserted into the targeted view (similar to the text inputs in the form). While I have managed to make most aspects generic and functional, I am encountering an issue with making the (click) function dynamic. I aim to specify the function to be triggered using the componentFactory, but I seem to be stuck at implementing this feature.

In my search for solutions, I have not come across any resources that address my specific problem. Below is the code for the component I have created so far:

button.component.ts

import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ButtonComponent implements OnInit {

  @Input() group: FormGroup;
  @Input() type: string;
  @Input() description: string;
  @Input() class: string;
  @Input() data: string;
  @Input() callFunction: string;

  constructor() { }

  ngOnInit() {
  }

}

button.component.html

<div [formGroup]="group">
  <button type="{{ type }}" class="{{ class }}" (click)="{{callFunction}}">{{ description }}</button>
</div>

The issue lies in the button.component.html file where the (click) directive does not work as expected. It triggers the following error:

Parser Error: Got interpolation ({{}}) where expression was expected

While everything else is functioning correctly, the inability to make the button's click action entirely dynamic hinders its full customization. Unfortunately, I have not found a suitable resource to address this particular requirement.

EDIT: I have included the function responsible for importing the component into my view:

buildLoginButton(){
  let data = {
    type: "button",
    class: "btn btn-primary px-4",
    description: this.translate.transform("pages[login_page][login_form][buttons][login]"),
    callFunction: "login()", //I have tried this.login() as well
    group: this.userForm
    }
  const inputFactory = this.resolver.resolveComponentFactory(ButtonComponent);
  const loginButton = this.login_button.createComponent(inputFactory);
  loginButton.instance.group = data.group;
  loginButton.instance.type = data.type;
  loginButton.instance.class = data.class;
  loginButton.instance.description = data.description;
  loginButton.instance.callFunction = data.callFunction;
}

angular typescript

Answer 1

Answer №1

To implement property binding and event binding, follow the example below.

app.component.html

<app-button description="Dynamic Button"
  class="button" (callFunction)="onButtonClicked($event)" >
</app-button>

app.component.ts

export class AppComponent  {
  name = 'Angular';

  onButtonClicked(event) {
    console.log(event); // handle button clicked here.
  }
}

button.component.html

<div [formGroup]="group">
  <button [type]="type" [class]="class" (click)="onClick($event)">
   {{ description }}
  </button>
</div>

button.component.ts

import { Component, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css'],
  encapsulation: ViewEncapsulation.None

})
export class ButtonComponent implements OnInit {

  @Input() group: FormGroup;
  @Input() type: string;
  @Input() description: string;
  @Input() class: string;
  @Input() data: string;
  @Output() callFunction = new EventEmitter();

  constructor() { }

  ngOnInit() {

    this.group = new FormGroup({
      firstName: new FormControl()
    });
  }

  onClick(event) {
    this.callFunction.emit('I am button');
  }


}

Find the solution on stackblitz here

Answer 2

To implement property binding and event binding, follow the example below.

app.component.html

<app-button description="Dynamic Button"
  class="button" (callFunction)="onButtonClicked($event)" >
</app-button>

app.component.ts

export class AppComponent  {
  name = 'Angular';

  onButtonClicked(event) {
    console.log(event); // handle button clicked here.
  }
}

button.component.html

<div [formGroup]="group">
  <button [type]="type" [class]="class" (click)="onClick($event)">
   {{ description }}
  </button>
</div>

button.component.ts

import { Component, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css'],
  encapsulation: ViewEncapsulation.None

})
export class ButtonComponent implements OnInit {

  @Input() group: FormGroup;
  @Input() type: string;
  @Input() description: string;
  @Input() class: string;
  @Input() data: string;
  @Output() callFunction = new EventEmitter();

  constructor() { }

  ngOnInit() {

    this.group = new FormGroup({
      firstName: new FormControl()
    });
  }

  onClick(event) {
    this.callFunction.emit('I am button');
  }


}

Find the solution on stackblitz here

Answer 3

Answer №2

I successfully implemented the following example:

Child Component

export class HelloComponent implements OnChanges {
  @Input() name: string;
  @Input() callFunction: Function;  // NOTE: The data type must be declared

  ngOnChanges() {
    if (this.callFunction) {
      this.callFunction();
    }
  }
}

Parent Template

<hello 
  name="{{ name }}"
  [callFunction]="myCallBackFunction"></hello>

This template uses property binding with [] to reference the function from the parent component.

Parent Component

export class AppComponent  {
  name = 'Angular';

  myCallBackFunction() {
    console.log('called the function')
  }
}

You can view the working code on stackblitz here: https://stackblitz.com/edit/angular-function-input-property-deborahk

Upon running the code, you will see "called the function" printed in the console.

I haven't tested this with dynamically loaded components, so I cannot comment on how it would affect the functionality. However, the provided syntax works well for a standard component setup.

UPDATE

Defining an @Input property like this:

@Input() callFunction: Function;

Cannot be bound directly in HTML like this:

<button type="{{ type }}" class="{{ class }}" (click)="{{callFunction}}">

Instead, input properties should be set using property binding:

<button type="{{ type }}" class="{{ class }}" [callFunction]="someFunction">

If event binding is required, an @Output property needs to be defined.

Answer 4

I successfully implemented the following example:

Child Component

export class HelloComponent implements OnChanges {
  @Input() name: string;
  @Input() callFunction: Function;  // NOTE: The data type must be declared

  ngOnChanges() {
    if (this.callFunction) {
      this.callFunction();
    }
  }
}

Parent Template

<hello 
  name="{{ name }}"
  [callFunction]="myCallBackFunction"></hello>

This template uses property binding with [] to reference the function from the parent component.

Parent Component

export class AppComponent  {
  name = 'Angular';

  myCallBackFunction() {
    console.log('called the function')
  }
}

You can view the working code on stackblitz here: https://stackblitz.com/edit/angular-function-input-property-deborahk

Upon running the code, you will see "called the function" printed in the console.

I haven't tested this with dynamically loaded components, so I cannot comment on how it would affect the functionality. However, the provided syntax works well for a standard component setup.

UPDATE

Defining an @Input property like this:

@Input() callFunction: Function;

Cannot be bound directly in HTML like this:

<button type="{{ type }}" class="{{ class }}" (click)="{{callFunction}}">

Instead, input properties should be set using property binding:

<button type="{{ type }}" class="{{ class }}" [callFunction]="someFunction">

If event binding is required, an @Output property needs to be defined.

Creating a completely dynamic button in Angular 6: A step-by-step guide

Answer №1

Answer №2

Similar questions

Compel a customer to invoke a particular function

Modify data in a table using Dialog Component in Angular Material

The toggle button appears to be lacking in CSS styling

What is the process for injecting a template into the Kendo Upload's template?

Determine the overall sum of all items

The issue with Angular routing lies in the component content not displaying as expected

How can I iterate over a specific range in Angular (version 12 and higher) instead of looping through the entire array?

Modifying the array structure will deselect all individual <Input> elements that have been iterated

Angular 7 ESRI loader search widget focus out bug: finding a solution

Tips for navigating to a specific component within a single page

The mock function will only be triggered if it is placed at the beginning of the file

What is the best way to avoid curly braces in an Angular template?

Modify the parent property's value within a derived Angular service

Prevent selecting dates beyond the current date in Formly Datepicker within Angular

Has an official Typescript declaration file been created for fabric.js?

NgFor is designed to bind only to Iterables like Arrays

Getting started with html2canvas: A beginner's guide

Mastering the Art of Concise Writing: Tips to

Issue with sending headers in HttpClient.post method in Angular 8

The module "ng-particles" does not have a Container component available for export