DEV Community: Salman Kazmi

Content Projection in Angular - Part 2

Salman Kazmi — Wed, 06 Nov 2019 18:04:34 +0000

In the previous article on this topic, I touched the basics of Content Projection with Angular and how easily one can work with dynamic templates without much fuss. I also discussed the use case where one may need to project content to a Component dynamically.

Continuing in this post, I will touch some advanced use case scenarios where we can leverage the power that Angular provides.

Now, to discuss further, a Component provides us a functionality where we may pass the template in between the opening and closing braces of the component where we use it as a child in our template.

Like <demo><h1>This is the template for content projection</h1></demo>

The contents of the <h1> tag will be displayed where <ng-content> tag is present in the child i.e., demo component.

What if the child has several <ng-content> tags. How can we pass the template to a particular <ng-content> tag thereby rendering the dynamic view to its correct position?

Let's discuss Targeted Projection.

Angular provides us with the select attribute of the ng-content tag. With this attribute, we can actually work with targeted projection.

Use case 1:

<ng-content select="[first-place]"></ng-content>

The template can be passed as follows:

<demo>
   <p first-place>Hello World!</p>
</demo>

Use case 2:

<ng-content select="[place='first']"></ng-content>
<ng-content select="[place='second']"></ng-content>

The template can be passed as follows:

<demo>
   <p place='first'>Content 1</p>
   <p place='second'>Content 2</p>
</demo>

Use case 3:

<ng-content select=".place-first"></ng-content>
<ng-content select=".place-second"></ng-content>

The template can be passed as follows:

<demo>
   <p class='place-first'>Content 1</p>
   <p class='place-second'>Content 2</p>
</demo>

There are a few other use cases as well, which I will keep for some other day to discuss. I hope this post proves to be useful in you Angular learning journey. Cheers!

High time we discussed Mental Health

Salman Kazmi — Tue, 05 Nov 2019 13:12:23 +0000

Hazy Mornings. Brain Fog. Lack of Clarity. These symptoms may sound familiar to today’s knowledge worker. In these times where people are measured in terms of productivity and output, talking to someone about Mental Health issues is frowned upon. It is acceptable if one is physically unfit, is down with fever or is having a mild body ache but taking some time off to declutter your brain is I believe is not cool and is laughed off generally.

For knowledge workers like us, it is imperative and very important to discuss mental health issues and find out effective solutions and remedies that make us perform to the best of our abilities and get rid of depression, anxiety and lack of clarity towards our goals.

In this short article, I try to suggest some steps that can be undertaken by all of us regardless of the fact this modern epidemic hit us or not. Let’s start with point number one:

Conversation: We are social animals. We need company to survive. Period. Having a conversation with our fellow beings is not only important but a necessity. In these days of fast-paced technological innovations and connectivity, we are more disconnected from each other ever.
Technology helps us communicate but is not able to provide that human touch. Sort this communication thing in your life for better mental health. Find a person of two to chit chat in the office. Discuss your thoughts and feelings and take feedback. Believe me, it works.
Physical Fitness: A healthy mind resides in a healthy body. How aptly said. Be more physically fit from today onwards. Take those stairs. Eat healthy. Find time to take a casual walk in nature.
Planning: If you are failing to plan, you are planning to fail. Remember this and plan your day well in advance. Leave a few things to chance. Maintain a journal and write about the things you do in a day. It will help you understand where you spend your time thus proving beneficial in your plans. Try to lead life according to a routine.
Free Time: Throw those gadgets away for a while in the day and enjoy peace of mind. Sometimes not doing anything is also a great remedy. Enjoy your free time. Try meditation.
Get rid of negativity
Be closer to nature

It is very important to take care of your mind. It is ultimately the most prized resource we have.

Please share the techniques you use to declutter and how you stay on top of your game.

Content Projection in Angular - Part 1

Salman Kazmi — Mon, 04 Nov 2019 18:14:45 +0000

One of the more advanced topics in the study of the Angular framework is content projection. To understand this very important and interesting topic, we need to have a good understanding of how components work in Angular.

In this brief article, I try to explain what Content Projection actually is and what are the different ways Angular provides you to leverage this powerful feature.

Basically, content projection is a way by which we can provide an external template to a component thereby giving us the functionality to provide a template to a particular component to render. The component providing content projection may or may not have its own template.

Let’s look at a very basic example:

I have a component named demo as follows:

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`
})
export class HelloComponent {
  name: string = 'John!'
}

As we can see we have a variable defined ‘name’ that we use to show the name on the component’s template. If we change the name to some other, it is reflected in the template. We can also make it as an @Input to take the value of ‘name’ from the parent component where this component would be used. Eg. @Input()name: string = 'John!'

So, now the use case for content projection kicks in. What if I wanted the user to provide the heading tag along with the name of the user. He can provide an <h1> or an <h2> tag along with the name as it suits him. This is where Angular’s content projection kicks in.

Let’s take another example to understand better:

@Component({
  selector: 'hello',
  template: `<ng-content></ng-content>`
})
export class HelloComponent {}

Look closely, in this example, we have used a tag called ng-content provided to us by Angular to render a dynamic template that would be passed by the parent where this component would be used.

So, if I have a parent component say, DemoComponent as follows:

@Component({
  selector: 'demo',
  template: `
   <hello><h1>Hello John!</h1></hello>
   <hello><h5>Hello Doe!</h5></hello>
  `
})
export class DemoComponent {}

Here we can see that I have used the HelloComponent as a child twice passing different templates each time between the opening and closing tags. Actually we can pass a complete HTML template that would be rendered where <ng-content> is presently placed in the child (hello) component.

This is a very basic example to demonstrate how a template can be passed to a component thereby making the component's template dynamic. At its very core, content projection in Angular is pretty powerful offering various techniques to handle passed template which we will discover in the upcoming posts.

Hope you found this article useful.

A Case Against Open Floor Offices

Salman Kazmi — Sun, 03 Nov 2019 08:12:39 +0000

Alright, let me begin with my own experience with working on so-called team-building open floor offices that are the rage with IT companies these days. Honestly, the experience has been one on the downside and I personally prefer a place to work that is quiet and fosters imagination, creativity and the so-called Deep Work.

I, like many of you, work in the area of Software Development and quite frankly, it requires bouts of concentration and focus to get work done efficiently. I have worked in many different office spaces before and sadly most of the places had this open office floor trend. In general, I prefer to have no grudges with working in an open environment where one is easily reachable and communication flows freely, but especially for this one particular area which I discuss in this post, I strongly believe that the culture that open offices promote is not very conducive to effective work.

Effective Software Development, for once requires considerable amounts of focus and attention to detail to get the job done. WIth constant chatters, murmurs, and activity going in and around the office floor, the mind constantly is forced to get its attention diverted from the task at hand.

Our attention span is quite limited and the way we human beings are manufactured, we pretty much suck at multi-tasking. In order for us to concentrate fully on a given task, hands-on coding, for instance, we require constant undiverted attention.

I believe what we as programmers can achieve with constant focus and concentration in a given time far outweighs when the attention is diverted often. The mind consumes a lot of energy when it shifts attention from one task to another. So if we constantly try to focus on our work and there are distractions nearby, it fails to concentrate and is forced to multitask which in turn is very taxing in terms of energy consumption.

I strongly believe that open-floor offices with all their happenings, chit-chats and on-demand availability work culture is not at all helping in fostering growth and productivity.

No wonder we accomplish far more in the days we work from home or from a peaceful place like a library. The topic is debatable but I have my priorities sorted.

What do you think? Please share your thoughts in the comments below.

Have a productive week ahead!