Angular 2 @input дает мне undefined в консоли

Извините, если это дублирующийся вопрос, так как я не смог найти решения в другом месте в Интернете, поэтому публикую это в StackOverflow.

Я сослался на дублированные решения вопросов в StackOverflow, я не смог найти никаких решений для своего вопроса, так как решения, доступные в Stackoverflow, используют два компонента, а я использую один компонент.

Моя проблема

Я создаю угловые 2 компонента, в которых у меня есть @input для получения значения атрибута селектора, если я делаю console.log @input, я получаю неопределенное значение как значение

Компонент

import { Component,Input, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  template: ' <p>{{urlinput}}</p>'
})
export class AppComponent implements OnInit{
   @Input() urlinput;  
    ngOnInit() {console.log('value: ' + this.urlinput);}
}

index.Html

<app-root [urlinput]="hello">Loading...</app-root>

Пожалуйста, исправьте код, если что-то не так, заранее спасибо