Create Angular component with attribute without value

Question

I've started learning Angular recently one problem very simple (I think) which I can't find a solution is the following one:

I want to create a Component with a custom attribute without a value. Like this one:

<h1 attribute-without-value > Text <h1>

I tried in a different way but still, I don't have what I want.
I'm able to create an attribute with a value using this syntax: [attr.attr-with-value]="value" but not without.
Here some of my experiment (ref: https://stackblitz.com/edit/angular-sn94cl?embed=1&file=src/app/app.component.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template:  `
              <h1 {{nameAttr}} > doesn\'t work <h1>
              <h1 [attr.nameAttr] > also this doesn\'t work <h1>
              `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  nameAttr = 'attribute-without-value';
}

How can I do?

Your original code <h1 attribute-without-value > should work and add the attribute, as shown in this stackblitz. Do you need the attribute name to be dynamic? — Martin Parenteau
– Martin Parenteau, Commented Mar 26, 2020 at 17:18

CornelC · Accepted Answer · 2020-03-26 16:58:32Z

1

I think you are actually looking for directives not components

answered Mar 26, 2020 at 16:58

CornelC

5,3091 gold badge23 silver badges28 bronze badges

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

Comments

Reid Svntn · Accepted Answer · 2020-03-26 17:03:13Z

0

The string interpolation {{}} should be placed inside the text area of the h1 element.

<h1> {{nameAttr}} <h1>

If you don't want it to have a value, you can just set nameAttr to '' or null.

Or if you're trying to pass a value INTO a component without a value, then you'll have to create a 2nd component, one you can pass the data to. Mapping component attributes without a value

answered Mar 26, 2020 at 17:03

Reid Svntn

1161 silver badge3 bronze badges

1 Comment

gixlg Over a year ago

I want a dom element with an attribute not an element with textContent

edu · Accepted Answer · 2020-03-26 17:24:18Z

0

Try a directive. The way you try to do it it won't work.

https://angular.io/guide/attribute-directives

answered Mar 26, 2020 at 17:24

edu

4531 gold badge9 silver badges18 bronze badges

Collectives™ on Stack Overflow

Create Angular component with attribute without value

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related