Reducing and minimizing HTML in Angular components

If you are thinking about converting your site or application to a project that uses JavaScript framework, this post might be helpful. In my earlier web development days, I wrote a personal portfolio website using nothing more but HTML and CSS, and just a little bit of JavaScript. However, my experience and knowledge base grew larger with time, and I realized that things I want to do would be done better if I am using a framework. So, I decided to convert to Angular.

 

Photo by Gabriel Heinzer on Unsplash

 

What does Angular do better?

Say you have a block of HTML elements that displays your personal projects. It might look something like this:

<div class="projects">
      <div class="item">
        <a href="https://www.missionautomate.com" target="_blank">
          <img src="img/projects/ProjectMA.jpg" alt="project one" />
        </a>

      </div>
      <div class="item">
        <a href="https://www.forest-creations.com" target="_blank">
          <img src="img/projects/ProjectFC1.PNG" alt="project two" />
        </a>
      </div>

      <div class="item">
        <a href="https://objection.co/" target="_blank">
          <img src="img/projects/ProjectOBJ.png" alt="project three" />
        </a>
      </div>
      <div class="item">
        <a href="https://github.com/fadingbeat/css-wonders" target="_blank">
          <img src="img/projects/ProjectPortfolio.PNG" alt="project four" />
        </a>
      </div>
    </div>

There is a main div element of class “projects”, and each project is a div element of class “item”. We could look at these elements as objects, or more specifically, a list of objects. These elements can be separated from HTML and defined as objects in component.ts file.

In the example above, we are storing data directly in the HTML, but with the help of Angular, we can do that outside of HTML file and that way make our code more readable and easier to maintain in the future.

Our component.ts file would have the following list defined:

projects = [
        {
            url: 'https://www.missionautomate.com',
            img: 'assets/projects/ProjectMA.jpg',
            alt: 'Mission Automate project',
        },
        {
            url: 'https://www.forest-creations.com',
            img: 'assets/projects/ProjectFC1.PNG',
            alt: 'Forest Creations project',
        },
        {
            url: 'https://objection.co/',
            img: 'assets/projects/ProjectOBJ.png',
            alt: 'ObjectionCo project',
        },
        {
            url: 'https://github.com/fadingbeat/css-wonders',
            img: 'assets/projects/ProjectPortfolio.PNG',
            alt: 'CSS wonders projects',
        },
    ];

As you can see, we now have a list that comprises of objects who’s key-value pairs define each project. We can “pull” data from the list and display it in HTML with the help of *ngFor Angular directive:

<div class="projects">
    <div class="item" *ngFor="let project of projects">
      <a href={{project.url}} target="_blank">
        <img src={{project.img}} alt={{project.alt}} />
      </a>
    </div>
</div> 

The *ngFor directive in Angular loops through the given list, and displays data from that list. It’s similar to forEach() method in JavaScript. Here we are saying: For each object (project) in the list of objects (projects), display its url, img and alt values.

Now you can compare the initial HTML content with the content after separating the logic from the view. Thanks to Angular, it is much less HTML and it’s more readable.

Photo by Brett Jordan on Unsplash

CONCLUSION

In software development world, some of the most important features are clean and readable code. Frameworks help you achieve that. But you can’t just start writing it, you have to get there. Start with originals: HTML, CSS and JavaScript. Expand your knowledge with small projects and learn. Eventually, you will understand the benefits of frameworks and desire to use them will come naturally.

HTML

Java Script

Framework

Angular