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

Unable to establish a simulated environment and trial period for experimentation

Angular 2 - The creation of cyclic dependencies is not allowed

Using the "Range" Input Type in Angular's Reactive Forms

Tips on updating icons automatically

Can Next.js accommodate server-side redirection with internationalization?

Encountering an Unexpected Index Error with ngFor in Angular 4/5

Data that changes dynamically on a chart

When working with Angular and NGRX, I often wonder if opening my app in multiple tabs within the same browser will result in all tabs pointing to a single NGRX instance

Is there a way to retrieve the Angular-Redux store in a child module?

Error message received when making an API call in React Native for Android and saving the response to a local database: 'Error: Network

Data fetched by Next.js is failing to display on the web page

Incorporating ng2-bootstrap into an Angular2 project with SystemJS starter template

Creating a unique custom selector with TypeScript that supports both Nodelist and Element types

Using RouterModule.forRoot() in Angular 2 CLI compiler/ngc command: A step-by-step guide

A script object must only permit one property at a time

Differences between Angular TS Lint onInit and ngOnInit

Is it possible in Angular to directly bind the emitted output of a component to a property?

What are the steps to fix errors when deploying a MEAN stack application on Heroku?

gulp-angular2 task is malfunctioning

Angular `build` is encountering an error when dealing with externals that are declared using `webpack`