Angular 2 duplicate component in template reference another element

Question

Simplified I have a component that can be used multiple times within any template. How would I get my component click-me to pair with the input element below it so when the event (click in this case) is fired it will apply (change the input type to hidden in this case) to that input. Obviously the approach is important here not the hide!

What can I add to pair them keeping the duplicate component generic and autonomous?

import {Component} from 'angular2/core';

@Component({
    selector: 'click-me',
    template: `<button (click)="onClickMe()">Hide A Friend Input</button>`
})

COMPONENT

export class DuplicateComponent {
    onClickMe() {
        alert("try change type");
        this.type = "hidden";
    }
}

TEMPLATE

<div>
  <click-me></click-me>
  <input type="input" value="friend 2 to hide" id="clickme1">
</div>

<div>
  <click-me></click-me>
  <input type="input" value="friend 2 to hide" id="clickme2">
</div>

Click here for Plunker

Amit Chigadani · Accepted Answer · 2017-05-19 11:54:00Z

2

Make use of Template references #click1 and #click2 so that you can take control of your component.

    <div>
      <click-me #click1></click-me>
      <input type="input" value="friend 2 to hide" id="clickme1" [hidden] = "click1.type">
    </div>

    <div>
      <click-me #click2></click-me>
      <input type="input" value="friend 2 to hide" id="clickme2" [hidden] = "click2.type">
    </div>

edited May 19, 2017 at 11:54

answered May 19, 2017 at 11:30

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

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

4 Comments

MagicLuckyCat Over a year ago

Doesn't seem to work: plnkr.co/edit/hfgbU8MI8uv8KByOW9Qo?p=preview

Amit Chigadani Over a year ago

@PaulThomas In your plunker here, use [type] instead of just type, since you are dealing with angular.

MagicLuckyCat Over a year ago

<input [type]="#input1.showType" value="friend 2 to hide"> Nope throws parse error

Amit Chigadani Over a year ago

@PaulThomas <input [type]="input1.showType" value="friend 2 to hide"> do not use # while using it.

mikias · Accepted Answer · 2017-05-19 15:27:53Z

2

Using Translusion

Demonstration

I think the best way to make this component is to transclude whatever you want inside the duplicate component.

Then inside the duplicate component you can store the transcluded content inside a span tag so the styling will be preserved. Then add a click handler that toggles the hiding of the span tag.

Note that you can use this not just with input elements but other components simply by wrapping them in the duplicate component.

// app.component.html

// app.component.html
<click-me>
  <input type="input" value="friend 1 to hide" id="clickme2">
</click-me>

<click-me>
  <input type="input" value="friend 2 to hide" id="clickme2">
</click-me>

<click-me>
  <input type="input" value="friend 3 to hide" id="clickme2">
</click-me>

// duplicate.component.ts
import {Component} from 'angular2/core';

@Component({
    selector: 'click-me',
    template: `
      <button (click)="onClickMe()">Hide A Friend Input</button>
      <span [hidden]="hidden">
        <ng-content></ng-content>
      </span>
    `
})

export class DuplicateComponent {
    hidden = false;

    onClickMe() {
        this.hidden = !this.hidden;
    }
}

edited May 19, 2017 at 15:27

answered May 19, 2017 at 12:02

mikias

4463 silver badges10 bronze badges

5 Comments

MagicLuckyCat Over a year ago

I like the approach of swapping in the code for which I have given a vote. However the point was really to get a handle on the non-duplicated element to be handled by the duplicate component.

mikias Over a year ago

Ah I understand. In that case using template references is probably best. I'll see if I can give you a good solution without duplicating anything else written here.

mikias Over a year ago

@PaulThomas I added another solution where you pass in the template variable for you target. This should be more flexible than the last solution. Is it what you're looking for?

MagicLuckyCat Over a year ago

Yes the new one is pretty much what Amit Chigadani provided with template references. So thumbs up as well.

mikias Over a year ago

You're right that's the same thing. I'll remove the second solution to reflect that.

Picci · Accepted Answer · 2017-05-19 11:50:54Z

0

What i would do is

Define an output event in the DuplicateComponent component
Fire the output event whithin the onClickMe() method
Define via template variables a specific name for each occurence of DuplicateComponent in the template of the ContainerComponent (i.e. the component which contains the instances of DuplicateComponent)
Listen to the newly created event in each occurence of the DuplicateComponent with a method which passes the specific DuplicateComponent instance which has fired the event
Do what is required with the DuplicateComponent instance within the method attached as listener of the newly created event

It may sound complex, but I think the code is pretty simple (see working plunkr)

DuplicateComponent

import {Component, Output, EventEmitter} from 'angular2/core';
@Component({
    selector: 'click-me',
    template: `<button (click)="onClickMe()">Hide A Friend Input</button>`
})
export class DuplicateComponent {
  @Output() haveBeenClicked = new EventEmitter<any>();
    onClickMe() {
        this.haveBeenClicked.next();
        this.type = "hidden";
    }
}

AppComponent template

<div>
  <click-me (haveBeenClicked)="doStuff(two)"></click-me>
  <input type="input" value="friend 2 to hide" id="clickme2" #two>
</div>

AppComponent

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    directives: [DuplicateComponent]
})
export class AppComponent {
  constructor AppComponent {}

  doStuff(inputElement) {
    console.log(inputElement);
  }
}

edited May 19, 2017 at 11:50

answered May 19, 2017 at 11:43

Picci

17.8k16 gold badges80 silver badges125 bronze badges

5 Comments

MagicLuckyCat Over a year ago

Plunker not working, or at least it's not making the input field hidden?

Picci Over a year ago

Yes, it just prints the input element on the console. Once you have an hold on the Input element within the code, then you can do whatever you want.

MagicLuckyCat Over a year ago

I am just confused because yes you get a handle but the function onClickMe() last line does "this.type = "hidden"; However this doesnt seem to do anything, I would have expected it to hide the input?

Picci Over a year ago

The line "this.type = "hidden"; is there because it was there in your first plunkr and I did neither remove it nor thought that hiding the input element was important for you. In any case here is the plunkr that works and hides the input element.

MagicLuckyCat Over a year ago

Perfect, I see you're passing the reference through the function haveBeenClicked, I missed this before. Thanks

Collectives™ on Stack Overflow

Angular 2 duplicate component in template reference another element

3 Answers 3

4 Comments

5 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related