Angular component output properties

[@TrungNguyen-vt1nc]

Supper hero, Kudvenkat! your series saved my life!

[@furqans.mahmoud4511]

.you know exactly what an angular beginner need to learn Thanks alot

[@PraveenKumar-ft2kr]

Awesome as always. Thank you so much sir:)

[@manchusandy1]

Hello Sir. Why the method onRadioButtionSelectionChange() is not having a return type? why it is not causing error? (At 4:30)

[@saishree1000]

Super sir, clearly explained. Thanks for your efforts. Keep it up more videos

[@ShyamKumar9396]

Hi @kudvenkat, is it possible to get date format to input type range from component

[@deepwoodsengineering3763]

You're a legend, buddy!

[@nareshe9906]

Query1) say if the selection of the radio button is in same component then by giving onclick method ,if that on click method has some flag value and by using the flag value to its achievable? please confirm? Query2) But here the selection is belongs to some other component so here we are trying to pass data from one component to other component by using event emitter is it correct.?

[@subrahmanyam80]

Very nice explanation... Great effort in creating such a nice video series. Thank you so much ......

[@mariappan7kumar]

@kudvenkat Seriously this is how Angular 2 does radio button filter? Angular js needs just 6 lines of HTML code. How can we call this as an improvement from version 1?

[@gunnarweisskamp1530]

Completely agree. I find many things in Angular complete rubbish.

[@24306529]

I was about to say same thing.. this is way too complicated .. and this is just a radio button..I don't know what will happen if you start building some complex applications..it seems the responsibility of defining events and ngModels is on developers in Angular2..angularJS gives lot of things for free!

[@cristianscript5649]

but it is scalable and efficient for some reason angular 1 was depreceated

[@willkwan6783]

I'm getting a very weird behavior, I tried to duplicate this component (eg. employeeList and employeeList2), so I created two folders, however in my "employeeList2" folder, I removed the "employeeCount.component" files, and referenced to use the original employeeCount component (since I didn't want to "repeat codes") in my HTML. Then I put in the app.component.html page the following markup: All looks fine so far, except when you click the radio button of the bottom component, it also clicks the radio button of the top. Even more weird is that the radio buttons in the bottom component doesn't show the black dot (ie. it doesn't show any radio button being selected). Is this the wrong way to reuse components? Can't you have 2 components that uses the same employeeCount component? Or is it because the employeeCount emits and raises an event? Please can someone help.

[@vishaljaiswal3202]

Sir please make a video CRUD with angular 2

[@sasanknvs5603]

I have a query. What would the two way binding of 'SelectedRadioButtonValue' do ? Is it going to set the value property ? If so, it is already hardcoded with 'All,male and female'. how is it going to make difference ? or is it going to select the radio button ? In this case what property of control, the 'SelectedRadioButtonValue' will be bound to ?

[@AsifHameedeteksol]

I tried all videos one by one but getting this error on current video: ERROR TypeError: co.onRadiobuttonSelectionChange is not a function at Object.eval [as handleEvent] (employeeCount.component.html:6) at handleEvent (view.ts:141) at callWithDebugContext (services.ts:645) at Object.debugHandleEvent [as handleEvent] (services.ts:241) at dispatchEvent (util.ts:173) at eval (element.ts:222) at HTMLInputElement.eval (dom_renderer.ts:75) at ZoneDelegate.invokeTask (zone.js:424) at Object.onInvokeTask (ng_zone.ts:253) at ZoneDelegate.invokeTask (zone.js:423) can sone one guide me where i am wrong.

[@chiragratra3741]

If suppose the number of males or females are 0 , it is till going to display the how can we handle that or just show no record found ?? as we cannot simply handle it by this code of line *ngIf="!employees || employees.length==0". Please Sir if you could just provide a little more input

[@yamunaa5367]

Hi sir, I'm trying to this example with mat-table. But I'm unable to filter data, since we cannot have multiple * conditions in mat-row. Please help me out sir. Thanks in advance

[@mansijoshi4923]

understandable ! topic !! easy to understand ..

[@parashuramhosmani1581]

Nice explanation 👍👍👍

[@arpanbanerjee8584]

very clear cut explanation! thank you!

[@varun123456789rty]

I WONDER HOW THE CODE IS WORKING !! Name of our custom event was ''countRadioButtonSelectionChanged" in our child component but 12:22 method of the parent class is binded to onEmployeeCountRadioButtonChange i.e (onEmployeeCountRadioButtonChange)="onEmployeeCountRadioButtonChange($event)'". AM I GOING WRONG SOMEWHERE ?

[@velen3358]

jump to 16:00, it's just a mistake

[@Arvind8311]

you are correct an video is wrong!!

[@Hariharan0606]

Hello Sir!! A crystal clear explanation indeed.I have a question . we can still achieve the same without using @Input or @output . In which scenario(apart from passing data between components) , custom event binding and property binding will be required?

[@danishbaharia8927]

Thank you for the nice explanation

[@hamzehhanandeh3647]

Thank you for your effort, great videos

[@theprogrammer1677]

hi, I would appreciate an answer - I write this because normally you don't answer the comments. First of all, thank you for the best angular tutorials I have ever seen! Secondly, my question is if you are going to do more of the tutorials or if this was the last one? And if yes, when are you going to upload them?

[@niharikamiryalavk]

Awesome guruji :)

[@djus5]

Very good lessons!

[@shinojmm]

Sir, Output event name in parent is diff from the declaration of out event in child?

[@tazmazia5726]

Can be place all the *ng directive on ng-container ?

[@chandrasekharmanepali1493]

Hi sir, from above concept if male or female employees not available in list of employees, are we get still colspan row with "No employees to dispaly" ?

[@karthikb4298]

If you dont have male or female then there is no point in using this eg. or you can simply add anohter radio calling others and filter the list.

[@JoshPius]

Thank you so much!

[@sohailshaik9045]

Hi my ngmodel is binding after Click event so it returning an old value anyone can help?

[@sonuuniyal502]

can't we use custom filter for that?

[@harikagunti8001]

Hi, I have two components, I want to send socket connection from the first component to another component, am using Ionic and angular2+ for mobile app, so please help me

[@royarazi5043]

VERY GOOD!!!

[@dayanandchauhan683]

Great explains sir..

[@aparnalonkar1764]

Hi Sir, I write the same code but value is not changing after selecting male , I am still able to see all the values(it should display male only). No errors are there . when I select male/female/all, I am able to see the changes in console but its not changing in UI. Plz help

[@CuriousKaviCruiser]

I am having the same issue. The properties and event are not getting bound. Did you find the issue?

[@nessd1]

Output decorator can only be used on events. However the documentation says "bindingPropertyName" and don't clarify this.

[@karthikb4298]

It would be very helpful if you add one more input element search box filter to this use case. Thank you.

[@manikantajupudi4129]

Thanks, Sir.

[@gurjotsingh752]

Hi Sir, which component render first ? container( employeeList) component or nested component(employeeCount) ? Flow is bit confusing. can u please put a debugger and let us know the flow. thanks

[@PraveenKumar-ft2kr]

Just add console.log statements to both the constructors. :)

[@MuhammadAbdullah-cn4qz]

[(ngModel)] doesn't work when i run application with f5 in visual studio. But When i run application using npm start in cmd then [(ngModel )] is Working. Please Tell me what to do. I don't know what's going on

[@gnakzor]

You're probably using a cached version of the webpage. If you're using Chrome, open developer tools (F12), go to Network tab and make sure Disable cache checkbox is checked. Then refresh your webpage using SHIFT+F5 to clear the cached version. If it doesn't work try to close all browser windows and then run the app from Visual Studio. Other browsers have the same option, I just don't know exactly where it's located so search a bit. Hope this helps.

[@cristianscript5649]

it was hard to grasp but finally I understood

[@gopalnichal8888]

@Kudvenkat Sir pls upload a video on Http services

[@raqibul1000]

Thanks a Billions.

[@lokeshpanwar1618]

hello sir, while I select All then it hit 'Female' and randomly it through radio button values where I miss will you help me. I did code same as yours.

[@deepkarmakar3510]

I'm also facing the same issue.

[@aruppanda6049]

is this the last video of angular2?

[@nessd1]

There can be useful naming convention on input and output properties

[@priyankkeshri1619]

this make more sense for filtering: OnEmpRbChange(selectedRbEmpValue: string): void { this.selectedRbEmpValueCS = selectedRbEmpValue; if (selectedRbEmpValue != 'All') { this.employees = this.Allemployees.filter(e => e.gender === selectedRbEmpValue); } else { this.employees = this.Allemployees; } } rather than using *ngIf

[@rajarajanseeman6758]

Awesome lesson

[@indiafirst1990]

how to pass data between 2 component if they are not connected? any video on that class will be helpful.

[@mohmmadalnaddaf4495]

perfect thank you. so much

[@amanjutt1591]

Mohammad Alnddaf plz explain what is the difference between Angular and AngularJS???

[@mohammedyousef4344]

but you can use filter as prev video

[@RECKED_NOXIN]

Nice video i have seen on angular 2

[@DecentProgrammer]

nice video

[@mohittri8066]

Hello sir i am facing an issue. Can't bind to 'ngModel' since it isn't a known property of 'input'.

[@AAA12345671234567]

import form from angular core

[@mohittri8066]

himanshu tripathi I use the exactly code which is written in the blog of this lecture.

[@puttaarunkumar919]

Hello mohit the issue over their is formsModule must be imported in app.module.ts and must be added in the @NgModule decorator.

[@preetikumari7214]

import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ FormsModule ], add in app.module.ts

[@47lokeshkumar74]

How your male is showing as 4. female 2, All is 6,. How your are counting kindly help me plz

[@piupaul2454]

Hi Sir, first of all thank you for these great videos. But for this module, when I am selecting any radio button, getting the previous value of the selected one. Please Help. Thanks again :)

[@PraveenKumar-ft2kr]

You should have used (click) event instead of (change) event. i just now corrected :D after so much research. lol

[@hrvojekrolo3166]

When I run this example on Chrome it's doesn't work. It works correctly on Firefox and Opera? Anyone have the same problem?

[@shanilshah5283]

I have same, did you found any solution?

[@ajitpedha6381]

@@shanilshah5283 Try doing hard reset on chrome and reload,it should work

[@amanjutt1591]

Sir Plz tell me what is the difference between Angular and AngularJS???

[@divyangdesai1634]

Angular JS is a JavaScript framework, wheres Angular (2 and so on) is just completely revived framework. You can find more at: dzone.com/articles/typed-front-end-with-angular-2

[@amanjutt1591]

Sir Divyang Desai this article that you mention is about angular 2 and angular 1 not about angularjs and angular

[@divyangdesai1634]

LOL, Have you checked wiki? en.wikipedia.org/wiki/AngularJS Which stated "AngularJS (commonly referred to as "Angular.js" or "AngularJS 1.X")" Hope that make sense!

[@amanjutt1591]

sir thank soo much for helping me

[@47lokeshkumar74]

try to code into github bro

[@velen3358]

So similar to Event in C#.

[@priyatiwari7791]

chapters":[{"id":"5ace205", "subject":[{"id":"5ace20","name":"Biology"}]} How i will display name of the subject? {{chapters.subject[name]}}

[@rahulsalunkhe8364]

As I go further i m getting more and more confuse in this video. Request you to make another video. Please help..

[@emergingtechinfo4980]

I have one doubt.. AngularJS going down fall in front react.js does it help us in future learning this AngularJS. Please can you explain me detailed.. Thanks in advance..

[@divyangdesai1634]

Nope, Angular Js and Angular(2,4 & 5) are two different things, if we consider angular and react yes both are good for future learning. You can check trends onStack Overflow: imgr.es/3PIV And more information from here: www.c-sharpcorner.com/article/angular-2-or-react-for-decision-makers/

[@emergingtechinfo4980]

@divyang thank you for reply and info with links. I have seen latest trends showing as react on top position except in india that is why im asking this question. im posting the latest trends link below please have a look. goo.gl/2iKKrC

[@divyangdesai1634]

Hey, this is bit interesting now, actually both have positive and negative points that what I tried to show you using that c-sharpcorner link. And use of different technologies by region is very obvious. Moreover, your query has terms "angularjs, angularjs 2,react" which are irrelevant with comparison. I've modified your query and now you can see the actual thing: trends.google.com/trends/explore?q=angular,reactjs

[@emergingtechinfo4980]

:) Thank you, Desai for helping me to find out the comparison. but I feel React.js is getting popular than Angular.js. because I am getting calls on react more than Angularjs here in india too.. If my guess is not correct I will be happy because I learnt Angular.js and waiting for job.

[@divyangdesai1634]

Hey, still I would like to say "Angular.js" and "Angular" are two different things. And people are using more react because it is stable and easy to learn as compare to angular. If you ask about future, interfering DOM element is future as per current trend.

[@abdelhafidsaou6815]

Not an easy things to understand ! I needed to replay this video many times to understand what is going there with that advanced concept in angular !

[@betaakurnia3998]

you are not alone man :D

[@yasser2768]

because the way he explains it is crap

[@srushtidaware7978]

it took one hour for me to understand the video, replayed it many times!

[@VinayBhardwaj1]

This translation on screen hide 20-30 percent of code part pls do the needful to get rid of this

[@Csharp-video-tutorialsBlogspot]

Hello Vinay, please turn off the closed captions using the settings button on the player. You will find the settings button on the bottom right hand corner of the player. Hope this helps.

[@VinayBhardwaj1]

kudvenkat thanks this worked for me

[@loveChroniclesTv]

this is hardest the hardest part. too many pieces moving around.

[@jvppriyanka7467]

NJ