Very nice and informative tutorial, thank you for sharing with us. For initial checking you can use *ngIf that will not allow to display the undefined data. Thank you for sharing stay connected :)
Hi Ashiz, could not get your question. Do you mean how the scroll is happening in the video even without selecting? I am using my mousewheel to scroll. Or is your query something different?
is there a quick way to include node_modules folder from already created Angular projects which reside in same folder in which I am creating new project. e.g app1/ /node_modules /src . . app2/ /can i include node_modules dir for this project /src . . because it takes much too time each time I create a new project. thanks in advance.
How to change color of some text randomly on button-click? For example: text = "hello world" palette = ['red', 'yellow', 'blue', 'green', 'grey', 'orange', 'cyan'] const anyColor = Math.floor(Math.random() * (this.palette).length) this.text = this.text.fontcolor(this.palette[anyColor]) but it's not working as expected, could you help me through this? Thanks.
Hi Rupank, your logic is correct. Only I think you can try removing 'const' from anyColor, if you want to keep choosing random color, but in case if this random color will be choosen once after load of page then your code should work fine.
Actually, the problem is this is not changing the text color (color of 'hello world'), instead, it changes the text 'hello world' to 'red' or 'green' or 'blue'.
Are you trying to implement it in angular2/4? If using Angular 2/4 you can try out something like this: In HTML template implement the following or something similar: hello world in the typescript component implement the following: private palette: any; public textColor: string = ''; public onRandomTextColor(): void { this.text = "hello world"; this.palette = ['red', 'yellow', 'blue', 'green', 'grey', 'orange', 'cyan']; let anyColor = Math.floor(Math.random() * (this.palette).length); this.textColor = this.palette[anyColor]; }
It worked, thanks a lot! But it also says "Identifier 'anyColor' is never reassigned, prefer 'const' over 'let', which I think is logical. And why 'font' is striked-out in tag?
Most welcome... yes is anyColor is never reassigned then const is a better way to go. tag is deprecated so that is why it is striked out. You can try any other tag like span or div e.g. Hello World
Thanks Vicky :) . To highlight there can be various approach like create your own custom directive or simply apply some css dynamically on selection etc.
Hi Junaid, I have a question when we wrap property in child selector like this [sample]="samplevalue" in the parent.html file, it works fine but problem I am facing that parent HTML also import whole background and other elements or data from child page. how I can make parent.ts property globally available to the child, just the property value. Thanks
If I understood your question properly, as how can we only expose only a particular property of the child instead of all the properties. Not sure if my understanding of your question is correct :), but in case if this is exactly your question then if we keep the scope of all properties in child as private and not public except the property that I am exposing to the parent then that exposed property will only be accessible (using @Input() decorator). But if you have used the @ViewChild then in that case it exposes the properties and methods of the child component.
sir your videos explanations are quite good and they are understandable.Sir please provide videos on pdf viewer in ionic framework and they must work in ios devices please try them
Hi Hemanth, I just created the component manually for beginners learning purpose. In actual development project we use angular CLI's ng to create components to save time and also have the code design in place. You are right :)
Hi ...greate videos .....I want to know i was doing practice exercise i was trying to send data from one child component to other child in second child i am displaying some data from a array declared in ts of second child .......i want to push new item in list when i receive a input ........where to write that function
Thanks Shubham for watching my video. It depends if your list is specific and local to the child component. If it is local to your child component then you can write it in the child component ts. But if this list item will be used in different part of application then it would be advisable to keep it global where any component can access, I mean a seperate component altogether.
Hi Junaid.. Please show us how to use @input and @output with child parent app(i.e one common parent as a header and multiple childs running under parent in . I am able to send data but whole template also get displayed when i bind @input property to component selector. I am banging my head from last 2 days.
Junaid Alam No. I am still not able to send data to child in router outlet. I tried @input, @output and viewchild. @input @output send the data but also inject the corresponding html template. While i always get undefined if i use @viewchild. Please look into this as everyone out there want to know how to do parent child communication inside router outlet. I have managed to do this with observables and services but not with @input @output and @viewchild
Why are you making your own file? You can make component inside the cli just type "ng g component nameofcomponent". With this method there is no error because angular itself add the components in the module.
Thank you for some information that you present on this video. But... 47min video?! Nobody have the time to see everything. I speed up x2 and still the image wasn't fast enough. Improve the time video, be more direct ;)
Thanks very much for your valuable feedback :) . Actually as a trainer I observe that many new learners learn the topic more clearly if they see the coding being done from scratch and in steps, so that is why the duration of my video's are longer, but yes for those viewers who already know the basics of the subject and just looking for how to implement a certain feature or API, then they only need to check the significant points and going in so much minute step would be like delaying their precious time. Well going forward let me try making relatively short videos and check how it works out :D. And once again I appreciate your feedback as it helps me understand better the areas of improvement :)
TH-cam is filled with videos where instructors rush through concepts far too quickly. I can say the same for Angular courses I have paid for too. I really appreciate Junaid's approach.
no need Sir pls DONT , bcs this is giving us a complete understanding as we are a beginners here , you explain each and every line of code you write in such a better way thats make learning so easy and thats the only reason that we are here. So pls do as you are doing it bcs you are doing it great. thanks!
Very Helpful video. Jazak Allah Khair.
Thanks Akhlack :)
awesome video and you hav explained so cleanly...thanks :)
Very nice and informative tutorial, thank you for sharing with us.
For initial checking you can use *ngIf that will not allow to display the undefined data. Thank you for sharing stay connected :)
Superb tutorial for beginner.
Thanks, Nice topic to learn angular parent child
Thanks Lalit :)
I am using one form for adding and updating the details. I want to change the form title for both these separate action. Please guide me.
I want to refresh parent data on closing popup. parent data is coming as @Input to my component . can u please help me how can i achieve that
Really nice tutorial!
Thanks..It's really helpful..
Can we use Alias name which we have set in @Input('Name') in expressions while displaying the data {{Name}}????
How auto scroll is working while selecting..what make that doing?? Explain please.
Hi Ashiz, could not get your question. Do you mean how the scroll is happening in the video even without selecting? I am using my mousewheel to scroll. Or is your query something different?
can you do the same with sibling components?
Hello Sir.....Will you please make video for "which UI components should we use with angular 2/4/6 ?"
is there a quick way to include node_modules folder from already created Angular projects
which reside in same folder in which I am creating new project. e.g
app1/
/node_modules
/src
.
.
app2/
/can i include node_modules dir for this project
/src
.
.
because it takes much too time each time I create a new project.
thanks in advance.
Hi Abdul, you can even copy paste an already created node_modules folder from one project to another project.
hahahahahaha Junaid Alam
can you send all code in description ?
You are Great Sir
Thanks for your kind word Subhasis :)
How to change color of some text randomly on button-click? For example:
text = "hello world"
palette = ['red', 'yellow', 'blue', 'green', 'grey', 'orange', 'cyan']
const anyColor = Math.floor(Math.random() * (this.palette).length)
this.text = this.text.fontcolor(this.palette[anyColor])
but it's not working as expected, could you help me through this? Thanks.
Hi Rupank, your logic is correct. Only I think you can try removing 'const' from anyColor, if you want to keep choosing random color, but in case if this random color will be choosen once after load of page then your code should work fine.
Actually, the problem is this is not changing the text color (color of 'hello world'), instead, it changes the text 'hello world' to 'red' or 'green' or 'blue'.
Are you trying to implement it in angular2/4?
If using Angular 2/4 you can try out something like this:
In HTML template implement the following or something similar:
hello world
in the typescript component implement the following:
private palette: any;
public textColor: string = '';
public onRandomTextColor(): void {
this.text = "hello world";
this.palette = ['red', 'yellow', 'blue', 'green', 'grey', 'orange', 'cyan'];
let anyColor = Math.floor(Math.random() * (this.palette).length);
this.textColor = this.palette[anyColor];
}
It worked, thanks a lot!
But it also says "Identifier 'anyColor' is never reassigned, prefer 'const' over 'let', which I think is logical.
And why 'font' is striked-out in tag?
Most welcome... yes is anyColor is never reassigned then const is a better way to go. tag is deprecated so that is why it is striked out. You can try any other tag like span or div e.g.
Hello World
Great tutorials. How can i highlight the selected row?
Thanks Vicky :) . To highlight there can be various approach like create your own custom directive or simply apply some css dynamically on selection etc.
please give video on web api and angular 4
Hi Junaid, I have a question when we wrap property in child selector like this [sample]="samplevalue" in the parent.html file, it works fine but problem I am facing that parent HTML also import whole background and other elements or data from child page. how I can make parent.ts property globally available to the child, just the property value. Thanks
If I understood your question properly, as how can we only expose only a particular property of the child instead of all the properties. Not sure if my understanding of your question is correct :), but in case if this is exactly your question then if we keep the scope of all properties in child as private and not public except the property that I am exposing to the parent then that exposed property will only be accessible (using @Input() decorator).
But if you have used the @ViewChild then in that case it exposes the properties and methods of the child component.
legend. Great
sir your videos explanations are quite good and they are understandable.Sir please provide videos on pdf viewer in ionic framework and they must work in ios devices please try them
hey.. Can i know why u creating component manually? we can use ng generate component right? that ll be good practice i guess ...
Hi Hemanth, I just created the component manually for beginners learning purpose. In actual development project we use angular CLI's ng to create components to save time and also have the code design in place. You are right :)
Hi ...greate videos .....I want to know i was doing practice exercise i was trying to send data from one child component to other child in second child i am displaying some data from a array declared in ts of second child .......i want to push new item in list when i receive a input ........where to write that function
Thanks Shubham for watching my video. It depends if your list is specific and local to the child component. If it is local to your child component then you can write it in the child component ts. But if this list item will be used in different part of application then it would be advisable to keep it global where any component can access, I mean a seperate component altogether.
Ok ....How do the child component know that new element has arrived We have to execute that local function
Your way of explaining is good brother. But it goes slower a bit lengthy in explanation. But you are great teaching skills and talent..👍👍
anyway this video help me alot thanks for that
Thanks :)
Please request to make with http service..just confused
There is already one video on http service here:
th-cam.com/video/qZY58QxJxZA/w-d-xo.html
awesome
Hi Junaid.. Please show us how to use @input and @output with child parent app(i.e one common parent as a header and multiple childs running under parent in . I am able to send data but whole template also get displayed when i bind @input property to component selector. I am banging my head from last 2 days.
Hi Navid, sorry to miss your message as I get rare bandwidth nowadays to log in due to immense work load :). Is your issue resolved?
Junaid Alam No. I am still not able to send data to child in router outlet. I tried @input, @output and viewchild. @input @output send the data but also inject the corresponding html template. While i always get undefined if i use @viewchild. Please look into this as everyone out there want to know how to do parent child communication inside router outlet. I have managed to do this with observables and services but not with @input @output and @viewchild
Sir! Please make on ContentChild and ContentChildren
its great ..... I want to learn angular 2 input and output. Will it work??
yes sure.
Why are you making your own file? You can make component inside the cli just type "ng g component nameofcomponent". With this method there is no error because angular itself add the components in the module.
please remove noise.
Thank you for some information that you present on this video.
But... 47min video?! Nobody have the time to see everything. I speed up x2 and still the image wasn't fast enough.
Improve the time video, be more direct ;)
Thanks very much for your valuable feedback :) . Actually as a trainer I observe that many new learners learn the topic more clearly if they see the coding being done from scratch and in steps, so that is why the duration of my video's are longer, but yes for those viewers who already know the basics of the subject and just looking for how to implement a certain feature or API, then they only need to check the significant points and going in so much minute step would be like delaying their precious time. Well going forward let me try making relatively short videos and check how it works out :D. And once again I appreciate your feedback as it helps me understand better the areas of improvement :)
TH-cam is filled with videos where instructors rush through concepts far too quickly. I can say the same for Angular courses I have paid for too. I really appreciate Junaid's approach.
Thanks James :)
you make it so much lengthy lecture. it should be just about input and output binding. you are just going to start it from scratch
Thanks for your feedback Zia.. I would try to minimize the duration as much as possible in future tutorials :)
no need Sir pls DONT , bcs this is giving us a complete understanding as we are a beginners here , you explain each and every line of code you write in such a better way thats make learning so easy and thats the only reason that we are here. So pls do as you are doing it bcs you are doing it great. thanks!
tin pe hathodaa marne jaise aawaj hi teri mouse ki
lol :) ... Yes I realised that later on and in last few series I removed the mouseclick... Thanks for your feedback :)
can you send all code in description ?
Hi Sunil, Unfortunately i do not have those codes anymore after I re-initiated my work space.