7

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.

Yogesh
  • 246
  • 1
  • 4
  • 20
  • 4
    Responsiveness of application completely depends on your css, it has nothing to do with any of the frameworks like (angular/react) you can use media queries to make app responsive, to learn more you can refer this article https://marksheet.io/css-responsiveness.html – Akshay Rajput Dec 21 '18 at 10:14

4 Answers4

10

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).

Sergeon
  • 6,638
  • 2
  • 23
  • 43
6

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.

Zlatko
  • 18,936
  • 14
  • 70
  • 123
3

The latest version of Angular responsive by default

Whether your Angular app is responsive or not depends on how you write your HTML/CSS code. When writing Angular app, essentially, you write HTML/CSS the same way you would write it anywhere else (except for Angular specific stuff, like components, directives, templates,...) but nothing is responsive unless you write it to be.

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?

Well, it depends on your preference. I find it that Bootstrap makes writing responsive apps easier and with lot less code, but there is a learning process where you will have to learn about Bootstrap classes and how to implement them into your design. Also, what could happen is that months after delivering a site built with Bootstrap, the client asks for changes which look simple to make, until you realize that you’re breaking the design of other parts of the website.

Media Queries, on the other hand, tend to make writing responsive apps a bit more difficult since you have to write everything yourself, but it makes your website design straightforward, and easier to modify later.

In the end, you will have to write extra code to achieve responsive design, whether you choose Bootstrap, Media queries or something else entirely...

miselking
  • 3,043
  • 4
  • 28
  • 39
2

  1. No, Angular is not responsive by default. "AngularJS is a structural framework for dynamic web apps. With AngularJS, designers can use HTML as the template language and it allows for the extension of HTML's syntax to convey the application's components effortlessly. Angular makes much of the code you would otherwise have to write completely redundant." The same discription applies to Angular (Angular2+) ~ https://www.awwwards.com/practical-uses-of-angularjs-create-a-single-page-application-spa-or-a-website-menu-in-an-instant.html

  2. For me personally, I would say, make use of Bootstrap in order to make your web app responsive. It is quick and easy to use with a lot less code. ~ https://getbootstrap.com/

Corné
  • 1,304
  • 3
  • 13
  • 32