@ViewChild in Angular | Data Binding | Angular 12+
Вставка
- Опубліковано 1 лют 2022
- In this lecture, you are going to learn about @ViewChild decorator in angular. The @ViewChild decorator in angular is used to access an HTML element, a component or a directive in the component class.
Also remember that @ViewChild decorator returns the first matching element from the DOM and assign it to the property which we have decorated it with @ViewChild.
Let's understand @ViewChild decorator with an example.
Nice videos, thank you
Very clear explanation, thank you!
Thank you, Sir! You're one of the best teacher on UA-cam!
Awesome how I watch your videos to learn one thing and at the end I learnt a lot more. You're a great teacher. Thank you!
Thank you so much
Its really very much helpful 🎉🎉
@ViewChild static property can you also explain that?
Thank You.
Thank you so much!
Thank you very much! 👋
Will you please explain the difference about the use of viewchild vs @input@output... what is the advantages and disadvances over the other.
@ViewChild is to access child elements/components from the parent component.
@Input or @Output are to access data bindings in the child component that were set inside the parent component's template.
@@sourandbitter3062 That answer does not seem satisfactory to be honest.
I guess the main question is:
Why would you ever use @Output and EventEmitter when passing data from child component to parent component, when @ViewChild seems way more practical and does the same thing?
Property 'dateOfBirth' has no initializer and is not definitely assigned in the constructor.
11 @ViewChild('dobInput') dateOfBirth: ElementRef;
28th video @ViewChild video
instead of using viewchild static, we could use dependency injection right?
in which scenario we can use @ViewChild decorator
Why does sayHello() get called 4 times when the page displays?
How it worked without declaring var inside afterviewinit method?
I am getting this error when trying to access element.
Ts:
@ViewChild('', { static: false }) : ElementRef;
But i am getting this error:
Property '' has no initializer and is not definitely assigned in the constructor.
Html:
.
Can you please help me on this?
You probably need to add an exclamation mark after the property name . This is called the non-null assertion operator and tells TypeScript that the property will be set at runtime even though TypeScript cannot detect it at compile time:
@ViewChild('', { static: false })
!: ElementRef; //
hi i have got error in ts file property @ViewChild(DemoComponent, {static: true}) demoComp: DemoComponent; ->demoComp
Maybe, I don't get something, but it looks like if person was born on 27-th of October, 2001, he is not 21 y.o. yet - how it is explained with this method 'calculateAge()'
Just saying
Btw - content is very g00d - THANKS!
well the method only considers years , hence you get 2022-2001 = 21 years
Why statement in sayHello(), logged twice in console?
did you get answer for this?
@@shinocs7901 at least in react, it happens because its on development mode. In angular it may the the same reason.
please share link of java script course
#procademy
The second method you described in the video: "Accessing child component in the parent component using ViewChild decorator" is not working anymore.
It works.
You could be having difficulty compiling. Try - @ViewChild(DemoComponent, {static :true}) demoComp : DemoComponent = {} as DemoComponent;
Got error object is possibly undefined
Property 'age' has no initializer and is not definitely assigned in the constructor.
12 @ViewChild('ageInput') age: ElementRef;
~~~
You can try - = {} as ElementRef; to get it to compile. I don't know why he does not have to initialize things. This may be a setting somewhere.
share github code
here in your example if we delete even console giving error. It means not able to call function . Can you explain why it is like that ? what is the relation between and {{democomp.sayHello()}}
if you are getting error try this:
@ViewChild("dobInput") dateOfBirth!: ElementRef;
@ViewChild("ageInput") age!: ElementRef;
and if you want more precise calculation of age:
calculateAge(){
let birthDate = new Date(this.dateOfBirth.nativeElement.value);
let currentDate = new Date();
let diffInMilliseconds = Math.abs(currentDate.getTime() - birthDate.getTime());
let diffInYears = diffInMilliseconds / (1000 * 60 * 60 * 24 * 365.25);
this.age.nativeElement.value = Math.floor(diffInYears);
}
thanks this worked for me
@ViewChild('dobInput') dateOfBirth: ElementRef;
@ViewChild('ageInput') age: ElementRef;
Error
Property 'dateOfBirth' has no initializer and is not definitely assigned in the constructor.
Property 'age' has no initializer and is not definitely assigned in the constructor.
I am using Angular 14.
change @ViewChild('dobInput') dateOfBirth: ElementRef to @ViewChild('dobInput') dateOfBirth!: ElementRef
@ViewChild('ageInput') age: ElementRef; to @ViewChild('ageInput') age!: ElementRef;
gotta add `!` like: dateOfBirth!
Got error : object is possibly undefined
@ViewChild('dobInput') dateOfBirth!: ElementRef;
Try "!" after "dateOfBirth" and before ":"
Same for me😬