Angular: Template literals inside render body break
See original GitHub issueNot a huge problem but FYI its difficult to work with template literals in mitosis (and more if you’re compiling to angular)
Code:
export default function Button(props: ButtonProps) {
return <button class={`pa-button ${props.variant ? `pa-button--${props.variant}` : ''} `}>{props.children}</button>;
}
Result:
import { Component, Input } from "@angular/core";
@Component({
selector: "button",
template: `
<button
[class]="\`pa-button \${variant ? \`pa-button--\${variant}\` : ''} \`"
>
<ng-content></ng-content>
</button>
`,
})
export default class Button {
@Input() variant: any;
@Input() children: any;
}
The problem is that you’re transforming to strings, the bundler cannot understand the template literal inside (this is not happening in react or vue)
Fix (obvious fix… hah)
export default function Button(props: ButtonProps) {
return <button class={'pa-button ' + props.variant ? 'pa-button--' + props.variant : ''}>{props.children}</button>;
}
Result:
import { Component, Input } from "@angular/core";
@Component({
selector: "button",
template: `
<button [class]="'pa-button ' + variant ? 'pa-button--' + variant : ''">
<ng-content></ng-content>
</button>
`,
})
export default class Button {
@Input() variant: any;
@Input() children: any;
}
Issue Analytics
- State:
- Created a year ago
- Comments:12 (5 by maintainers)
Top Results From Across the Web
Line breaks in Angular Template literal returned from function ...
In an Angular 10 app I have a string that's composed of several template literals passed in from a function:
Read more >Template literals (Template strings) - JavaScript | MDN
Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded ...
Read more >multi-line text will not do line break in view #7781 - GitHub
I have a multi-line text data from database and want it to be displayed as {{text}} in template. However the result just display...
Read more >ES6 Template Literals in Depth - Ponyfoo
Template literals are a new feature in ES6 to make working with strings and string templates easier. You wrap your text in `backticks`...
Read more >Everything you need to know about ng-template, ng-content ...
Angular wraps the host element (to which the directive is applied) inside <ng-template> and consumes the <ng-template> in the finished DOM by ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Yeah, will close this for now since having state in
useState
takes care of the issue, and is how we want users to handle their component state.Maybe we can close this? For me it’s ok.