<div class="mdk-box bg-dark mdk-box--bg-gradient-primary js-mdk-box mb-0" data-effects="blend-background">
  <div class="mdk-box__content">
    <div class="hero py-64pt text-center text-sm-left">
      <div class="container">
        <h1 class="text-white">Angular Fundamentals</h1>
        <p class="lead text-white-50 measure-hero-lead mb-24pt">It’s not every day that one of the most important front-end libraries in web development gets a complete overhaul. Keep your skills relevant and up-to-date with this comprehensive introduction to Google’s popular community project.</p>
        <a href="{{ prefix or '' }}student-take-lesson.html" class="btn btn-white">Resume course</a>
      </div>
    </div>
    {% include 'pages/_course.navbar.html' %}
  </div>
</div>

<div class="{{ containerClass or 'container' }}">
  <div class="row">
    <div class="col-lg-7">
      <div class="border-left-2 page-section pl-32pt">
        
        <div class="d-flex align-items-center page-num-container">
          <div class="page-num">1</div>
          <h4>Getting Started With Angular</h4>
        </div>

        <p class="text-70 mb-24pt">Good tools make application development quick*er and easier to maintain than* if you did everything by hand. The goal in this guide is to build and run a simple Angular application in TypeScript, using the Angular CLI while adhering to the Style Guide recommendations that benefit every Angular project.</p>

        <div class="card mb-32pt mb-lg-64pt">
          <ul class="accordion accordion--boxed js-accordion mb-0" id="toc-1">
            <li class="accordion__item open">
              <a class="accordion__toggle" data-toggle="collapse" data-parent="#toc-1" href="#toc-content-1">
                <span class="flex">1 of 4 Steps</span>
                <span class="accordion__toggle-icon material-icons">keyboard_arrow_down</span>
              </a>
              <div class="accordion__menu">
                <ul class="list-unstyled collapse show" id="toc-content-1">
                  <li class="accordion__menu-link">
                    <span class="material-icons icon-16pt icon--left text-body">check_circle</span>
                    <a class="flex" href="{{ prefix or '' }}student-take-lesson.html">Introduction</a>
                    <span class="text-muted">8m 42s</span>
                  </li>
                  <li class="accordion__menu-link">
                    <span class="material-icons icon-16pt icon--left text-body">play_circle_outline</span>
                    <a class="flex" href="{{ prefix or '' }}student-take-lesson.html">Introduction to TypeScript</a>
                    <span class="text-muted">50m 13s</span>
                  </li>
                  <li class="accordion__menu-link">
                    <span class="material-icons icon-16pt icon--left text-body">play_circle_outline</span>
                    <a class="flex" href="{{ prefix or '' }}student-take-lesson.html">Comparing Angular to AngularJS</a>
                    <span class="text-muted">12m 10s</span>
                  </li>
                  <li class="accordion__menu-link">
                    <span class="material-icons icon-16pt icon--left text-50">hourglass_empty</span>
                    <a class="flex" href="{{ prefix or '' }}student-take-quiz.html">Quiz: Getting Started With Angular</a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>

        <div class="d-flex align-items-center page-num-container">
          <div class="page-num">2</div>
          <h4>Creating and Communicating Between Angular Components</h4>
        </div>
        <p class="text-70 mb-24pt">Data sharing is an essential concept to understand before diving into your first Angular project. In this section, you will learn four different methods for sharing data between Angular components.</p>

        <div class="card mb-0">
          <ul class="accordion accordion--boxed js-accordion mb-0" id="toc-2">
            <li class="accordion__item">
              <a class="accordion__toggle" data-toggle="collapse" data-parent="#toc-2" href="#toc-content-2">
                <span class="flex">6 Steps</span>
                <span class="accordion__toggle-icon material-icons">keyboard_arrow_down</span>
              </a>
              <div class="accordion__menu">
                <ul class="list-unstyled collapse" id="toc-content-2">
                  <li class="accordion__menu-link">
                    <span class="material-icons icon-16pt icon--left text-body">check_circle</span>
                    <a class="flex" href="{{ prefix or '' }}student-take-lesson.html">Introduction</a>
                    <span class="text-muted">8m 42s</span>
                  </li>
                  <li class="accordion__menu-link">
                    <span class="material-icons icon-16pt icon--left text-body">play_circle_outline</span>
                    <a class="flex" href="{{ prefix or '' }}student-take-lesson.html">Introduction to TypeScript</a>
                    <span class="text-muted">50m 13s</span>
                  </li>
                  <li class="accordion__menu-link">
                    <span class="material-icons icon-16pt icon--left text-body">play_circle_outline</span>
                    <a class="flex" href="{{ prefix or '' }}student-take-lesson.html">Comparing Angular to AngularJS</a>
                    <span class="text-muted">12m 10s</span>
                  </li>
                  <li class="accordion__menu-link">
                    <span class="material-icons icon-16pt icon--left text-50">hourglass_empty</span>
                    <a class="flex" href="{{ prefix or '' }}student-take-quiz.html">Quiz: Getting Started With Angular</a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>

      </div>
    </div>
    <div class="col-lg-5 page-nav">
      <div class="page-section">
        <div class="page-nav__content">
          <h4 class="mb-16pt">Table of contents</h4>
        </div>
        <nav class="nav page-nav__menu">
          <a class="nav-link active" href="">Getting Started With Angular</a>
          <a class="nav-link" href="">Creating and Communicating Between Angular Components</a>
          <a class="nav-link" href="">Exploring the Angular Template Syntax</a>
        </nav>
      </div>
    </div>
  </div>
</div>

<div class="{{ alt_bg }} border-top-2">
  {% include 'pages/_course.description.html' %}
</div>

<div class="page-section {{ alt_bg }} border-bottom-2">
  {% include 'pages/_course.author.html' %}
</div>

<div class="page-section border-bottom-2">
  {% include 'pages/_course.feedback.html' %}
</div>

<div class="{{ alt_bg }}">
  {% include 'pages/_course.rating.html' %}
</div>

<div class="page-section">
  <div class="{{ containerClass or 'container' }}">
    <div class="page-heading">
      <h4>Top Development Courses</h4>
      <a href="" class="text-underline ml-sm-auto">See Development Courses</a>
    </div>
    {% include '_courses.carousel.html' %}
  </div>
</div>