Signal inputs migration failing

[Swami Sanapathi]

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>('');
}

[Enea Jahollari]

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.

[Enea Jahollari]

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]

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.. ❤️