Angular 4 introduced important changes to conditional rendering with the *ngIf directive, making its use more convenient and flexible. One of the main improvements was the introduction of then and else blocks, which greatly simplified working with templates and improved code readability.

Prior to these changes, to implement conditional rendering in Angular, developers used a syntax based on the *ngIf directive, which required the use of a element to render alternative content via the else attribute. This solution could be a bit cumbersome, especially if the template needed to display multiple content options depending on different conditions.

Angular 4 introduced a new way to handle the *ngIf directive that makes it much easier to manage conditional rendering. Using then and else blocks, you can specify exactly what should be rendered when a condition is true or false. This eliminates the need to create separate blocks with for each of the display options, which greatly improves code readability and support.

This approach not only improves the structure of templates, but also makes code more logical and understandable, especially in large and complex applications. Now developers can more clearly organize the logic of element mapping right inside the *ngIf directive, instead of distributing it across many separate templates. For example, instead of manually writing several templates for different cases, a single directive with then and else blocks can be used, which reduces the amount of duplicated code.

In addition, the innovation makes it possible to significantly simplify the logic of content display in templates with different conditions. Previously, to create complex structures with several conditions, you had to combine several *ngIf directives, which made the code less compact. In the new version of Angular, it’s simple enough to use then and else blocks to control conditional rendering, which makes the code not only shorter, but also easier to understand.

That said, it’s worth noting that Angular 4 doesn’t support the else if construct, similar to JavaScript. However, by combining multiple *ngIf directives with different else blocks, you can create more complex logical structures to display elements depending on multiple conditions.

In summary, Angular 4 has greatly improved the handling of conditional constructs in templates. The introduction of then and else blocks has made the code more structured and the development process more convenient. This innovation is especially useful for the development of large applications, where code cleanliness and readability are of paramount importance.