The importance of 1:1 meetings between development managers and their reports.

Why are 1:1 meetings important?

One to one meetings are an essential part of management for all companies large or small, they provide a way for managers to connect with their reports. Its always a good idea to prioritize one to ones in our calendars and ensure that there is a regular space that can be allocated for the private conversations.

Together with each member of your team, reserve thirty to sixty minutes once a week or twice a week to talk about the timetable. This will help you stay on track. Do not allow yourself to feel hemmed in by the confines of a conference room; instead, propose taking a break from the office to go for a stroll or grab a cup of coffee.

While some managers like to schedule their one-on-one meetings on a specific day of the week, others prefer to spread out their meetings throughout the week so that they may maintain the highest possible mental presence. One advantage of scheduling meetings on the same day as one another is that it makes it easier to identify connections between the various activities being carried out by your team. Determine whatever method is most effective for you, then construct your timetable so that it returns the most information to your reports.

The one-on-one meeting is the most effective method for managers and the people who report to them to connect on important matters, build a solid connection, and guarantee that employees feel as though they are working toward their goals, both in the workplace and in other aspects of their lives.

However, if you do not have an appropriate framework, agenda, and mindset for the 1:1 encounter, it is possible that it will become just another meeting in your day. Here is our strategic strategy for making the one-on-one meeting the most important meeting you attend, whether you are a manager or an individual contributor.

In 1:1 meetings a manager sits down with an employee for the purpose of having a dialogue that can go in any direction and is planned in advance. The one-on-one meeting, as opposed to the status report or the tactical meeting, is an opportunity for coaching, mentoring, providing perspective, or even just venting. The one-on-one meeting goes beyond merely having an open door policy and instead sets aside time on a consistent cadence for leaders and their teams to engage with one another and communicate.

There isn't just one approach to set up a one-on-one meeting. The emotional requirements of people you manage, the nature of your relationship with the team member, and the degree of experience they have all play a role in determining the most effective method to plan your meetings so that they are productive.

The creation of an environment in which individuals may talk freely about the topics and worries that are on their minds is the most essential component of a productive one-on-one meeting. The employee is the primary focus of these discussions, and their presence is absolutely necessary.

 

Managers approach to 1:1

Each manager will have their own approach and ability to add their own personality and style to their one to ones. Start your one-on-one meeting with an open-ended question. This lets the most important and important-to-me topics rise to the top. Here are some questions you might try:

How are you feeling? (Open ended to see how the report is feeling, as well as to look for hidden signs in their tone and words; there may be hidden signals to their mental state as well, which may necessitate additional questions and care.)

What did you learn last week / since we last talked? (Another open-ended question that will look for good and bad things they have learned; this may also provide insight into good and bad things they have learned.)

What are you most looking forward to?

What do you worry about the most?

 

Reports approach to 1:1

Take each meeting with your line manager seriously; this is your dedicated space where you can address concerns and learn about new information. Make notes during the week to remind yourself of topics to discuss and to ensure that your meeting runs smoothly. This is also a place to provide feedback/brag notes, letting your line manager know about the good things you've done so they're visible and not forgotten. If, like me, you are not involved in the day-to-day grunt work with the team, this is an excellent opportunity to let the management know about the excellent work you have been doing.

Another important aspect of this is managing up, where feedback and improvements can be fed back to management to improve processes and highlight any issues that can be identified early.

 

 

Installing Angular 11 with MVC 5 (4.7.2)

As part of a recent redesign project at work, we were looking at upgrading the current front end framework to Angular 11 whilst maintaining the much larger .net project in the backend. Despite a lot of searching I didn't manage to find any decent sources or tutorials as to how to do this successfully, In this article I will outline the following topics that will be discussed.

  • Installing Angular 11
  • Adding Angular to MVC 5 project
  • Set up lazy loading loading of components.
  • Recommendations for project folder structure.

 

Set up MVC 5 (4.7.2) Project

As there are already many tutorials if you really need one out there, set up a new / add a MVC project to your solution. Theres nothing special in this step.

 

 

Set up Angular 11 (2+)

Next is to set up Angular inside your new/existing project, likewise there are plenty of tutorials out there so will provide some snapshot scripts.

$ npm install --global @angular/cli
$ ng new angular10-example
$ cd angular10-example

The steps above are to install the angular cli globally, then create via scaffold the new angular project with your desired name.

 

The next part of the set up was the areas with little tutorial online and took some figuring out.

In the _Layout.cshtml

  • Add the reference to the base href <base href="/"/>

Setting up the bundles

  • After choosing your output directory and running ng build
  • Navigate to your BundleConfig.cs file and add the script bundle, note that with output angular files you cant minimize it again as this will cause the front end to error. So instead of using ScriptBundle use Bundle instead as below.

Setup call between MVC and Angular.

Now in the Index.cshml or what ever area you can to load the Angular app in add the call to <app-root> and the call to the bundles @Scripts.Render("~/bundles/angular"), note that the call to then bundles has to be after the app root.

 

Set up Lazy loading routing of components

In your main routing module, add a call to load children of your desired component main module example as app-routing-module.ts

Then just ensure that in your component section you have your child routing structure mapped as well

The Good and the Bad of Programming Forms in Angular 2

Compared to Angular 1, Angular 2 offer more choices for working with forms and more control over the data flow between a form and a model. However, I feel that Angular 2 provides form-related APIs and directives that are quirky and confusing, while also increasing the amount of work required to manage simple forms. This article isn’t intended to be a tutorial for working with forms in Angular 2 and some of the code inside is not code you want in a real application. Some of the code only exists to demonstrate how forms work. 

I apologize for not taking the time to make this post shorter.

Introduction

Angular 1 simplified working with forms by providing the ngModel directive. ngModel could synchronize an input’s value with a model property in a JavaScript object using 2-way data binding. ngModel also worked behind the curtains with an ngForm directive to build a data structure representing the state of the form and all the inputs inside the form. The data synchronization and the current form state gave us a straightforward approach to initializing, validating, and receiving form input.

At a high level, Angular 2 offers two different approaches to working with forms. Both approaches can use the new NgModel directive for 2-way data binding, although the new NgModel doesn’t work exactly like the old ngModel of Angular 1.

The first approach we’ll look at is a declarative approach using NgForm and NgModel. We’ll call this approach the NgForm approach, because the form level directive we’ll use is NgForm.

The second approach we’ll look at uses more imperative code and interacts with the form through one or more objects that abstractly represent controls on the page. We’ll call this the NgFormModel approach, because the form level directive we’ll use is named NgFormModel. 

Because there is a lot of flexibility in Angular 2, we’ll probably see many different variations of these 2 different approaches to forms. The code in this article is not the only way to work with forms.

The NgForm Approach

As a sample scenario, imagine we want to edit information about a movie. We have a Movie model and a MovieService to translate JSON from the server into the Movie model.  Given these pieces, a component to edit a specific movie might have code inside like the following.

movie: Movie;
 
constructor(private movieData: MovieService, 
            private params: RouteParams,
            private router: Router) {   
}
 
ngOnInit() {
    var id = this.params.get("id");
    this.movieData.get(id)
                  .subscribe(movie => {
                      this.movie = movie;
                  });
}

The important piece here being that during initialization, the component uses a service to retrieve a movie model and assign the movie to a bindable field named movie. Here’s the essence of a template to edit a movie.

<form>
     
    <input type="text" [(ngModel)]="movie.title" required>        
     
    <!-- other inputs and labels omitted ... -->
     
    <input type="submit" value="Save" (click)="save()">
     
</form>    

This simple template will give us 80% of the functionality we need. When the component updates the movie with fresh data from the server, NgModel will push updated values into the form. And, when the user types into the form, NgModel will push the form values back into the movie model. When the user presses submit, the save method only needs to take the existing movie model and ultimately serialize the values into an HTTP POST.

At this point we can even write style rules to highlight elements when they are in an invalid state. Some Angular 2 tutorials imply this is only possible after manually adding an additional directive. However, there is an NgControlStatus directive that automatically attaches to elements using the NgModel directive and modifies the classNames property to indicate when an input is valid, invalid, valid, dirty, pristine, etc. Since we have a required attribute on the input for a movie title, we could turn the entire input red when the input is empty using the following CSS.

.ng-invalid {
    background: red;
}

Angular 1 users will recognize the CSS name ng-invalid. We could use the same style rule with Angular 1. The similarities with Angular 1 mostly end here, however. To achieve the last 20% of the functionality the form requires we need to dive into some additional directives and syntax involving an unhealthy amount of misdirection.

Imagine we want to add a simple validation message that appears when the movie title is empty. In Angular 1 you could name a form and the inputs inside a form and have access to a data structure representing the entire form in the template scope. In Angular 2 there is still an NgForm directive that automatically attaches itself to <form> elements and provides an API to determine if a form is valid or invalid. Unfortunately, the NgModel directive no longer coordinates with NgForm to track the validity of a specific input.  This is unfortunate because the NgModel directive knows about the validity of its associated input (NgControlStatus relies on this knowledge). We can see NgModel at work by grabbing a local reference to the NgModel directive inside the template.

<input type="text" required
       [(ngModel)]="movie.title"
       #title="ngForm">        
 
<span *ngIf="!title.valid">
    Title is required!
</span>

In the above code, title becomes a local variable in the template and is assigned a reference to the ngForm directive. There is no actual ngForm directive on the input, however, but the code works because NgModel uses the exportAs property of its directive definition to alias itself as ngForm for these types of expressions. A confusing bit of indirection, I think, but an indirection that at least consistently repeats itself in one other scenario we’ll see later.

Although the above code can help us write validation messages for a specific input, it won’t help us track the validity of the form or the model as a whole. To achieve the holistic view, we need to start working with the real NgForm directive, the one attached to the form element. We’ll also switch to using NgForm’s submit event instead of using a click handler on the submit button.

<form #form="ngForm" (ngSubmit)="save(form)" novalidate>
     
    <input type="text" required 
           [(ngModel)]="movie.title"
           #title="ngForm">        
     
    <span *ngIf="!title.valid">
        Title is required!
    </span>
     
    <!-- other inputs and labels omitted ... -->
     
    <input type="submit" value="Save" />
     
</form>  

With this new code we are now passing a reference to the NgForm directive into the save method of the component. The save method might look like the following.

save(form) {
    if(form.valid) {
         this.movieData.save(this.movie)
             .subscribe(updatedMovie => {
                this.router.navigate(['Details', {id: updatedMovie.id}]);
            });
    }
} 

Except … the check for form.valid in the above code won’t work. Again, in Angular 1 the NgModel directive would register itself with its parent NgForm so the form would know about the validity of all the data bound inputs of the form. In Angular 2, NgModel knows if the model is in a valid state, or not, but NgModel doesn’t coordinate with the form directive. In other words, the user could have an empty title input, but the NgForm we are working with will still present itself as valid.

In order to add the input’s state to the form, we need to use a new directive with an alias of NgControl.

<input type="text" required 
       [(ngModel)]="movie.title"
       ngControl="title">        
 
<span *ngIf="!form.controls.title?.valid">
    Title is required!
</span>

Now the form will know about the title input and form.valid will include a validity check of the title. We can even dot into the form.controls object to find the title, as demonstrated in the NgIf expression. We can still alias the input to a local variable if the expression is too cumbersome.

<input type="text" required 
       [(ngModel)]="movie.title"
       ngControl="title"
       #title="ngForm">        
 
<span *ngIf="!title.valid">
    Title is required!
</span>

Note that in this case the title variable is not going to get a reference to NgModel, but instead reference the directive put in place by the ngControl attribute (which is the NgControlName directive because this directive, like NgModel, uses exportAs to alias itself as ngForm). 

Here then, are some of the facts to know about the current situation.

  • NgControlName uses a selector of ngControl but exports itself as ngForm
  • Both NgControlName and NgModel derive from an NgControl abstract base class, so both can work with validation directives (like the RequiredValidator) and report on their validation status.
  • The NgModel directive selector excludes elements where the NgControlName directive is present, but NgControlName can use an existing NgModel expression to effectively two-way bind the model and input value.
  • NgModel and NgControlName thus share an amazing number of similarities, but …
  • Only NgControlName will register itself with the parent NgForm and give us the complete picture for validation

When I dig into the details like the ones listed above, I have to wonder why NgControlName exists. NgModel could give us the same capabilities without adding an extra directive. I’m biased with the (relative) simplicity of Angular 1, but what’s happening looks like unnecessary complexity.

 

The NgFormModel Approach

Perhaps one reason for the complexity of the model approach is that Angular is pushing developers away from using two-way data binding features. I feel this is unfortunate. Two-way binding has gotten a bad reputation because it was easy to abuse in situations where two-way binding isn’t an appropriate solution. For example, updating a model value in one controller of the application and allowing the change to implicitly propagate through other controllers on the screen which in turn could also update the same value. Other UI frameworks provide solutions for these complex UI scenarios using events, messages buses, or event aggregators.

Most forms, on the other hand, are a closed loop. I need to populate the inputs with values, and then retrieve the input values into an object I can serialize and and send off to the server. NgModel was perfect for this scenario where data would only flow between the form and the model. Certainly there are complex forms out there in the world, but I suspect the simple case represents more than 80% of the forms in existence.   

For complex forms, Angular 2 provides control and form abstractions that allow explicit data shuffling and validation in code.  The template code in this approach is a bit simpler.

<form [ngFormModel]="form" (ngSubmit)="save()">
     
    <input type="text" [ngFormControl]="title">
     
    <span *ngIf="!form.controls.title?.valid">
        The title is required!
    </span>
     
    ...
     
    <input type="submit" value="Save">
     
</form>

In the above template, NgFormModel and NgFormControl will bind their respective DOM elements to controls created by the underlying component. In contrast to our previous snippet of component code, the component associated with this template does not contain a field of type Movie. Instead, the component contains fields representing the form and the inputs inside the form.

form: ControlGroup;
title: Control;
 
constructor(private movieData: MovieService, 
            private params: RouteParams,
            private router: Router) {  
 
    this.title = new Control("initial value", Validators.required);
    this.form = new ControlGroup({
        title: this.title
        // ... 
    });      
}

Notice how validation rules have moved. Instead of being attributes in the template the rules are applied in code. The API here feels a bit clumsy and forces you to compose all rules for a control into a single composite rule using Validators.compose. There are many places in the Angular 2 API where arrays of things are accepted as a parameter, but not here for validation rules.

Also, instead of constructing a ControlGroup directly, the component could inject a FormBuilder and use the builder to create the control group. The API is the same for both, and again a bit clumsy since you pass the grouped controls as key value pairs. I think a reasonable alternative would be to give each individual control a name (which a control should have in any case), and then create a group from a collection of controls.

In theory, creating controls and their associated validation rules inside the component makes unit tests against the component more valuable. We can write asserts to make sure the proper validation rules are in place. In practice I think this is overkill for most simple forms with declarative validations. There is a lot of test code needed to make sure a single required attribute is in place, and it is the type of test that will live in the test mass for years without failing. Certainly complex validation logic needs testing, but perhaps not the application of the logic. If anything, an argument could be made to push complex validations into the model itself instead of coupling the logic with a specific UI component.

Although it is not necessary to create a field for each individual control, doing so allows for cleaner code when you access the control. For example, when data arrives from the server we can use the fields to update the screen.

ngOnInit() {
    var id = this.params.get("id");
    this.movieData.get(id)
                  .subscribe(movie =>{
                      this.title.updateValue(movie.title);                     
                  });
} 

Here again there is a bit of an oddity in the API. A control has several set methods (setParent, setErrors), but when it comes to the value property, the method to set the value is named updateValue. Yes, I’m picky, but it is often the small inconsistencies that tell the biggest story about an API.

Updating a model or sending the form information back to the server is the above operation in reverse. In other words, you can go to each control and read the value property to receive the associated input value.

If all the code required to update and read the control values is bothersome, you can still use NgModel in combination with NgFormControl, just like NgModel works with NgControlName.

<input type="text" [ngFormControl]="title" 
       [(ngModel)]="movie.title" >
 
<span *ngIf="!form.controls.title?.valid">
    The title is required!
</span>

Now a component only needs to set a movie field to set the control values, and read the field to fetch the control values.

Summary

There are many variations to the different approaches I’ve presented here. The approach you’ll want to use comes down to answering a couple questions. Do you want to avoid using NgModel because two-way binding is evil? If so, use NgFormModel and explicitly read and write control values from the code. Do you want to avoid writing component code for every individual control on the screen? If so, use NgForm and NgControlName to instantiate controls from the template (and synchronize values using NgModel).

Although I might sound critical of the Angular 2 approach to forms, there are some interesting scenarios these approaches enable which I’ve run out of room to cover. For example, treating changes in a form as an observable stream of events. Also, all the APIs and directives provided allow for a tremendous amount of flexibility and cover more application scenarios compared to Angular 1. 

Overall though, I worry that all of the similar names (ngControl versus ngFormControl), the similar but different syntaxes (ngControl=”..” versus [ngFormControl]=”..”), and aliasing (NgControlName uses an NgControl selector but exports as ngForm) is too much for busy developers who will cargo cult a solution without understanding the implications. And in the end, there is no simple approach to handle simple forms.