Signal inputs migration failing
swami-sanapathi opened this issue · 3 comments
swami-sanapathi commented
Case 1
Before
@Component({
selector: 'app-input-example',
template: `
{{ label }}
@if (iconRight) {
<span>blah blah</span>
}
`,
standalone: true
})
export class InputComponent {
@Input() label!: string;
@Input() iconRight!: string;
}
After
import { Component, input } from '@angular/core';
@Component({
selector: 'app-input-example',
template: `
{{ label() }}
@if (icoiconRight()
<span>blah blah</span>
}
`,
standalone: true
})
export class InputComponent {
label = input<string>();
iconRight = input<string>();
}
Case 2
Before
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-input-ex',
template: `
<button>
@if (sort === 'asc') {
<span class="asc">
<i class="fa fa-sort-asc"></i>
</span>
{{ ascText }}
} @else {
<span class="desc">
<i class="fa fa-sort-desc"></i>
</span>
{{ descText }}
}
</button>
`,
standalone: true
})
export class InputComponent {
@Input() sort!: string;
@Input() ascText!: string;
@Input() descText!: string;
}
After
import { Component, input } from '@angular/core';
@Component({
selector: 'app-input-ex',
template: `
<button>
@if (sort() === 'asc') {
<span class="asc">
<i class="fa fa-sort-asc"></i>
</span>
{{ ascText() }}
} @else {
<span class="desc">
<i class="fa fa-sort-desc"></i>
</span>
{{ descText() }}
</button>
`,
standalone: true
})
export class InputComponent {
sort = input<string>();
ascText = input<string>();
descText = input<string>();
}
Case 3
Before
import { Component, Input } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-input-ex',
template: `
<input type="text" class="form-control" placeholder="Search" [(ngModel)]="search" />
`,
standalone: true,
imports: [FormsModule]
})
export class InputComponent {
@Input({ required: true }) search!: string;
}
After
import { Component, input } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-input-ex',
template: `
<input type="text" class="form-control" placeholder="Search" [(ngModel)]="search()" />
`,
standalone: true,
imports: [FormsModule]
})
export class InputComponent {
search = input.required<string>();
}
Case 4
Before
export class InputComponent {
@Input() desc: string | undefined = undefined;
}
After
export class InputComponent {
desc = input<string>(undefined);
}
Case 5
Before
import { NgStyle } from '@angular/common';
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-input-ex',
template: `
<div [ngStyle]="{ height: height, width: width }"></div>
`,
standalone: true,
imports: [NgStyle]
})
export class InputComponent {
@Input() height = '100px';
@Input() width = '100px';
}
After
import { NgStyle } from '@angular/common';
import { Component, input } from '@angular/core';
@Component({
selector: 'app-input-ex',
template: `
<div [ngStyle]="{ height(): height(), width(): width() }"></div>
`,
standalone: true,
imports: [NgStyle]
})
export class InputComponent {
height = input('100px');
width = input('100px');
}
Case 6
Before
import { NgStyle } from '@angular/common';
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-input-ex',
template: `
<span class="icon">
<i class="{{ iconClass }}">{{ icon }}</i>
</span>
`,
standalone: true,
imports: [NgStyle]
})
export class InputComponent {
@Input() iconClass: string = '';
@Input() icon: string = '';
}
After
import { NgStyle } from '@angular/common';
import { Component, input } from '@angular/core';
@Component({
selector: 'app-input-ex',
template: `
<span class="icon">
<i class="{{ iconClass }}">{{ icon() }}</i>
</span>
`,
standalone: true,
imports: [NgStyle]
})
export class InputComponent {
iconClass = input<string>('');
icon = input<string>('');
}
eneajaho commented
Thanks for all this @swami-sanapathi.
Will add all those cases in the tests and will start working on fixing them today. These fixes will definitely help others.
eneajaho commented
Hello @swami-sanapathi
On my initial tests, I can see that the first case and the second case, already work as they should. Can you make sure you are on the latest version of the library?
Thanks
swami-sanapathi commented
Yes @eneajaho, the first two cases are working fine now; I don't know what went wrong. I'm on the latest version 3.1.2
, as I was yesterday and today as well. 😂 Thanks for your valuable work.. ❤️