Angular insert default values into a library component

Question

I'm wondering if it's possible to somehow insert default values into a component from a library (but not wrapping it into another component which does this) to set default values.

e.g. i don't want this same thing all over my code, so when something changes that I have to change all the occurrences:

    <lib-datepicker
      [mindate]="01-01-2020"
      [pattern]="dd-MM-yyyy"
      [icon]="fa-calendar" ... />

i'd somehow like to do something like this:

    <lib-datepicker
      some_angular_magic.insertDatepickerDefaultValues() ... />

Is there something similar which does this?

I'm assuming this component is not yours but external library, and cannot make changes to it? — Bojan Kogoj
– Bojan Kogoj, Commented Sep 2, 2024 at 14:20
I mean i could, but it's used in other projects and i don't want to affect others with it — Wilbert
– Wilbert, Commented Sep 2, 2024 at 14:31

spots · Accepted Answer · 2024-09-02 13:56:40Z

0

Inputs on components can have a default value.

export class ExampleComponent {
  @Input() stringValue = 'default';
}

Them means that usages of the component can simply omit passing a value for a particular input and the default value will be used.

For example:

<app-example></app-example>
<app-example stringValue="test"></app-example>

answered Sep 2, 2024 at 13:56

spots

2,7485 gold badges24 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

halfer · Accepted Answer · 2024-09-02 22:31:54Z

0

You can create a directive with the same selector as the component, then you can override the input properties on the directive constructor.

I recommend using the Wrapper component method since it's tried and tested for many years, if not try this:

import { Component, Input, Directive, inject } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Directive({
  selector: 'app-child',
  standalone: true,
})
export class ChildDirective {
  child = inject(Child);

  constructor() {
    this.child.mindate = 'directive set this!';
    this.child.pattern = 'directive set this!';
    this.child.icon = 'directive set this!';
  }
}

@Component({
  selector: 'app-child',
  standalone: true,
  template: `
    {{mindate}} | {{pattern}} | {{icon}}
  `,
})
export class Child {
  @Input() mindate = 'nothing was set';
  @Input() pattern = 'nothing was set';
  @Input() icon = 'nothing was set';
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChildDirective, Child],
  template: `
    <app-child/><br/><br/>
    <app-child
    [mindate]="'input from parent'"
[pattern]="'input from parent'"
[icon]="'input from parent'"/><br/><br/>
    <app-child/><br/><br/>
    <app-child/>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

Stackblitz Demo

edited Sep 2, 2024 at 22:31

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Sep 2, 2024 at 13:55

Naren Murali

66.3k6 gold badges51 silver badges97 bronze badges

2 Comments

Wilbert Over a year ago

Thank you, by "I recommend using the parent component method...", do you mean wrapping it in a component?

Naren Murali Over a year ago

@Wilbert Yes, since its tried and tested and guaranteed to work, this method is rarely used by developers

Collectives™ on Stack Overflow

Angular insert default values into a library component

2 Answers 2

Comments

Stackblitz Demo

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related