Pass data from parent component to child component using @input decorator in angular 8

Hello i want to pass a number from component to another and i'm using @input.

Here my parent component :

@Component({

    selector: 'inter-asp',
    styleUrls: [('./asp.component.scss')],
    templateUrl: './asp.component.html',
    template: '<app-my-dialog [hellovariable]="hellovariable"></app-my-dialog>',
    providers: [PaginationConfig],
})

export class aspComponent implements OnInit {
    public hellovariable: number = 100;

}

and here my child component :

 @Component({
      selector: 'app-my-dialog',
      templateUrl: './my-dialog.component.html',
      styleUrls: ['./my-dialog.component.css']
    })
    export class MyDialogComponent implements OnInit {

      @Input() hellovariable: number;
}

in the child component i want to show the content of my variable hellovariable passed from parent component but i get undefined it is not passed so what is the problem here.

It takes preference to the template url, remove that part and have it as

@Component({
    selector: 'inter-asp',
    styleUrls: [('./asp.component.scss')],
    template: '<app-my-dialog [hellovariable]="hellovariable"></app-my-dialog>',
    providers: [PaginationConfig],
})

STACKBLITZ DEMO