SHARE

Hey gang, in this Angular 2 tutorial we’ll walk through how Angular 2 templates work and how we can style them using either a component CSS file, or a global stylesheet.

—– COURSE LINKS:
+ Repo – https://github.com/iamshaunjp/angular-2-playlist
+ Atom editor – https://atom.io/
+ Download Node.js – https://nodejs.org/en/

———————————————————————————————
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== PSD to WordPress Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W

============ Node.js for Beginners Playlist =============

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

================== Social Links ==================

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

24 COMMENTS

  1. Hello The net Ninja,

    I have notice that when you render your angular 2/4 project on browser. on browser its adding extra attribute/directive
    " _ngcontent-enf-2 " over html and css.
    —————————————————————————————————————–
    Example :
    Original source code:
    HTML : <div class="sample-name"> Some text content here </div>
    CSS : .sample-name { display:block};

    On Browser render code:
    HTML : <div _ngcontent-enf-2 class="sample-name"> Some text content here </div>
    CSS : .sample-name[_ngcontent-enf-2]{ display:block};
    ————————————————————————————————————————————-

    My Question : why annular 2/4 generate automatically of " _ngcontent-enf-2 " attribute or directive ?
    what is the use of " _ngcontent-enf-2 " attribute or directive ?
    How to useful in project " _ngcontent-enf-2 " ?

    Kindly reply..!

    Thanks,
    Jitendra

  2. Hello The net Ninja,

    I have notice that when you render your angular 2/4 project on browser. on browser its adding extra attribute/directive
    " _ngcontent-enf-2 " over html and css.
    —————————————————————————————————————–
    Example :
    Original source code:
    HTML : <div class="sample-name"> Some text content here </div>
    CSS : .sample-name { display:block};

    On Browser render code:
    HTML : <div _ngcontent-enf-2 class="sample-name"> Some text content here </div>
    CSS : .sample-name[_ngcontent-enf-2]{ display:block};
    ————————————————————————————————————————————-

    My Question : why annular 2/4 generate automatically of " _ngcontent-enf-2 " attribute or directive ?
    what is the use of " _ngcontent-enf-2 " attribute or directive ?
    How to useful in project " _ngcontent-enf-2 " ?

    Kindly reply..!

    Thanks,
    Jitendra

  3. Is it possible to show to put html in app.html that was binding from product.html? Like inheriting them into app.html. Want to build something like a shopping cart where people constantly can see the quantity of products that were dropped in the cart.

  4. Thanks for these great tutorials! Think youtube's decision to play Wix ads over this was a little misplaced haha, I clearly don't want to use Wix

  5. in the latest version, public folder no longer exists, styles.css is created automatically in the src directory. the css file is automatically included without the need for it to be called out in the html

  6. Hi All, I observed one issue while following along the video here. For me even though the "ng serve" is running, if I make any changes to app.component.html it is not reflecting on localhost:4200 until I terminate the already running "ng serve" and run it again. If anyone else faced the same issue and overcome it, please reply.
    TIA

  7. What gets put in public/styles.css needs to be put in src/styles.css instead. Add this to the head of index.html:

    <link rel="stylesheet" type="text/css" href="styles.css">

  8. Great video! Yet there is no "public" folder any more, only "assets" beneath "src" instead. And I prefer keeping the style sheets separately, for easy plug-able apps.

  9. Right now it seems the angular 2 changed the file structure and no public folder. The styles.css just stay in the src folder, but I wonder how this style.css is linked to the whole project?

  10. my styles.css was already created in the project folder, i dont have any public folder tho.. took me sometime to find it

  11. Thanks for the awesome tutorials!

    My program is seeing styles.css but not updating any of the styles.

    When creating a new project with ng new dirName, my program didn't contain the config, dist, public, tmp, & typings folders. I'm assuming this is my problem. Should I manually create those folders or is there a more efficient solution?

  12. These are some great tutorials here, i followed your nodejs tutorials also and now following your angular2 tutorials, these are some great resources you are providing for carving a MEAN stack profile….kudos 🙂

LEAVE A REPLY

Please enter your comment!
Please enter your name here