Please Like and Share

I have 4+ experience and working as software Engineer with Hytech professionals India PVT ltd and also working as Consultant,Trainer,Blogger and Author on Microsoft technologies,Also I have Trained more than 500+ IT professionals.I have knowledge about Asp.net,C#,SQL,Project management,replication,MVC,WebApi,SSRS,PostMan,TFS,SVN,Swagger,WMI,Agile,SignalR,Angularjs,IIS configuration.

1:
Always Close Your Tags

Back
in the day, it wasn't uncommon to see things like this:

Bad:

1

2

3

<li>Some
text here.

<li>Some
new text here.

<li>You
get the idea.

Notice
how the wrapping UL/OL tag was omitted. Additionally, many chose to
leave off the closing LI tags as well. By today's standards, this is
simply bad practice and should be 100% avoided. Always, always close
your tags. Otherwise, you'll encounter validation and glitch issues
at every turn.

Better:

1

2

3

4

5

<ul>

<li>Some
text here. </li>

<li>Some
new text here. </li>

<li>You
get the idea. </li>

</ul>

2:
Declare the Correct DocType

When
I was younger, I participated quite a bit in CSS forums. Whenever a
user had an issue, before we would look at their situation, they HAD
to perform two things first:

Validate
the CSS file. Fix any necessary errors.

Add
a doctype.

"The
DOCTYPE goes before the opening html tag at the top of the page and
tells the browser whether the page contains HTML, XHTML, or a mix of
both, so that it can correctly interpret the markup."

Most
of us choose between four different doctypes when creating new
websites.

There's
a big debate currently going on about the correct choice here. At one
point, it was considered to be best practice to use the XHTML Strict
version. However, after some research, it was realized that most
browsers revert back to regular HTML when inter pretting it. For that
reason, many have chosen to use HTML 4.01 Strict instead. The bottom
line is that any of these will keep you in check. Do some research
and make up your own mind.

3:
Never Use Inline Styles

When
you're hard at work on your markup, sometimes it can be tempting to
take the easy route and sneak in a bit of styling.

Bad:

1

<p
style="color: red;">I'm going to make this text red
so that it really stands out and makes people take notice! </p>

Sure
-- it looks harmless enough. However, this points to an error in your
coding practices.

Better

1

2

3

#someElement
> p {

color:
red;

}

4:
Place all External CSS Files Within the Head Tag

Technically,
you can place stylesheets anywhere you like. However, the HTML
specification recommends that they be placed within the document HEAD
tag. The primary benefit is that your pages will seemingly load
faster.

5:
Consider Placing Javascript Files at the Bottom

Remember
-- the primary goal is to make the page load as quickly as possible
for the user. When loading a script, the browser can't continue on
until the entire file has been loaded. Thus, the user will have to
wait longer before noticing any progress.

If
you have JS files whose only purpose is to add functionality -- for
example, after a button is clicked -- go ahead and place those files
at the bottom, just before the closing body tag. This is absolutely a
best practice.

Better:

1

2

3

4

5

<p>And
now you know my favorite kinds of corn. </p>

<script
type="text/javascript" src="path/to/file.js"></script>

<script
type="text/javascript"
src="path/to/anotherFile.js"></script>

</body>

</html>

6:
Never Use Inline Javascript.

Another
common practice years ago was to place JS commands directly within
tags. This was very common with simple image galleries. Essentially,
a "onclick" attribute was appended to the tag. The value
would then be equal to some JS procedure. Needless to say, you should
never, ever do this. Instead, transfer this code to an external JS
file and use "addEventListener/attachEvent" to "listen"
for your desired event. Or, if using a framework like jQuery,
just use the "click" method.

$('a#moreCornInfoLink').click(function()
{ alert('Want to learn more about corn?');});

7:
Download Firebug

I
can't recommend this one enough. Firebug is, without doubt, the best
plugin you'll ever use when creating websites. Not only does it
provide incredible Javascript debugging, but you'll also learn how to
pinpoint which elements are inheriting that extra padding that you
were unaware of. Download
it!

8:
Use Firebug!

From
my experiences, many users only take advantage of about 20% of
Firebug's capabilities. You're truly doing yourself a disservice.
Take a couple hours and scour the web for every worthy tutorial you
can find on the subject.

This page will walk through Angular @ContentChild and @ContentChildren decorator example. They are used to fetch first or all elements from content DOM. @ContentChild gives first element matching the selector from the content DOM. @ContentChildren gives all elements of content DOM as QueryList. Contents queried by @ContentChild and @ContentChildren are set before ngAfterContentInit() is called. If we do any change in content DOM for the matching selector, that will be observed by @ContentChild and @ContentChildren and we will get updated value. As a selector for @ContentChild and @ContentChildren, we can pass directive, component or local template variable. By default @ContentChildren only selects direct children of content DOM and not all descendants. @ContentChildren has a metadata descendants and setting its value true, we can fetch all descendant elements. Here on this page we will provide @ContentChild and @ContentChildren example using directive, component and ElementRef . Now find the complete example step by step.

@ContentChild and @ContentChildren

@ContentChild and @ContentChildren both are decorators. They are used to fetch single child element or all child elements from content DOM. Let us understand more about it.

@ContentChild

@ContentChild gives the first element or directive matching the selector from the content DOM. If new child element replaces the old one matching the selector in content DOM, then property will also be updated. @ContentChild has following metadata properties. selector: Directive type or the name used for querying. Find the example when type is directive.

@ContentChild(BookDirective) book: BookDirective;

read: This is optional metadata. It reads a different token from the queried element.

@ContentChildren

@ContentChildren is used to get QueryList of elements or directives from the content DOM. When there is change in content DOM, data in QueryList will also change. If child elements are added, we will get those new elements in QueryList. If child elements are removed, then those elements will be removed from the QueryList. The metadata properties of @ContentChildren are as follows. selector: Directive type or the name used for querying. Find the example when type is directive.

@ContentChildren(BookDirective) topBooks: QueryList<BookDirective>

descendants: This is Boolean value. When it is true then direct children and other descendants will also be included. If the value is false then only direct children will be included. descendants is used as follows.

The default value of descendants is false. read: This is optional metadata. It reads a different token from the queried element.

Using AfterContentInit

AfterContentInit is a lifecycle hook that is called after directive content is fully initialized. It has a method ngAfterContentInit(). This method runs after angular loads external content into the component view. This method runs once after first ngDoCheck() method. Contents queried by @ContentChild and @ContentChildren are set before ngAfterContentInit() is called. AfterContentInit is used as given below.

In the above directive we have used two @Input() properties. <book> element can be used in any component. Now create a component to use @ContentChild decorator to query element of type <book>. writer.component.ts

In the above component we are using @ContentChildren two times, one with default descendants and second with descendants with true value. Find the code snippet of person.component.html to use <favourite-books> and <book>elements.

In the above component name inside @ContentChildren('name') is the local template variable of a HTML element. Find the code snippet of person.component.html to use <favourite-friends> with <div> element.

Run Application

To run the application, find following steps. 1. Download source code using download link given below on this page. 2. Use downloaded src in your angular CLI application. To install angular CLI, find the link. 3. Run ng serve using command prompt. 4. Now access the URL http://localhost:4200