Is angular responsive by default?

Question

I have an application developed in Angular 4 and its not responsive so want to know if: 1. The latest version of Angular responsive by default. 2. What is the best approach to make an angular 4 application responsive. Bootstrap or media queries? or is there any other easier and better approach.

Answer 1

No. Angular is a framework that offers you a dependency injection implementation, html-to-javascript bindings, a build step that handles a lot of things for you, like transpilation, typescript compilation and a LOT of other cool stuff and niceties.

However, these are mostly related to javascript and build steps. Angular does not ship with a default stylesheet, and, apart from handling the css files you define in your project in your build step, it really has nothing to do with CSS.

For your site to be responsive, you need stylesheets and HTML that allow your page elements to react to browser sizes. Some frameworks offer this by default (like bootstrap), but that does not have nothing to do with Angular itself.

Even if you use a responsive CSS framework, if you don't setup the HTML markup properly, or if you start to mess with the stylesheet, some page elements may break in specific browser sizes.

(And just to clarify, CSS frameworks like bootstrap or foundation are not incompatible with Angular at all. They can be combined with ease).

Answer 2

The quickest answer would be, no, angular is not responsive by default.

But it's not entirely true. It's just that angular doesn't pack anything. With Angular, you only get infrastructure to create a web application, write some HTML and bind it all together. In other words, any HTML and styling that you end up with is only your own.

That means if you wanna deliver responsive templates, you need to build it yourself.

The easiest would be to either include a CSS framework (as you suggested, bootstrap would be a popular choice), or use a library that already has styling included, such as @angular/material or ngx-bootstrap. You can find others, too. There you get responsiveness by default.