How to Use Bootstrap and Angular 2 Together without Any Mistakes?

At first, Bootstrap and Angular 2 come along as simple issues to work with. In fact, they are both parts of one whole as Angular 2 library was built from zero to hero in Typescript applying the Bootstrap 4 CSS framework. But when it comes to creating a single-page application, many front-end developers get lost by conducting typical mistakes. The conclusion is that some of them have to become better software engineers with larger experience.

As for today, CSS and HTML are not the greatest concern anymore. It makes the life of developers more complicated as there are more things to learn how to operate various libraries and use programming languages. To name a few, developers have to cope with XHRs, app logic (e.g. models), performance, styles, structure, search engine optimization, and, moreover, achieve the ability to integrate with multiple external services. When done correctly, all of these tasks lead to the desirable User Experience (UX) which motivates customers to buy and download the offered applications.

After watching some videos and reviewing the comments of other users, you may have a general idea. Due to the fact Angular 2 and Bootstrap are recommended to be used together, we have gathered the top mistakes for each of the items. Just do it another way — and you’ll get it right!

Most Awful Mistakes with Angular 2

So far, let’s begin with exploring and getting rid of typical failures with Angular 2.

Error #1: Calling DOM APIs Directly

Only a few cases are known when manipulating the DOM directly is crucial. Angular 2 offers a range of impressive, top-level APIs just as queries. Leveraging these APIs grants the following benefits:

  • First and for most, there is an opportunity to unit test any app without turning to DOM; this fact reduces complicated aspects of testing by making the procedure faster.
  • It decouples the code from the browser. Thus, your app will work quicker in any rendering context (e.g., web workers or in Electron).

Try to avoid playing with DOM manually as you risk losing some of the benefits and, as the result, come up with less amazing code.

Based on an Angular 1 experience, there are just several scenarios where it would be recommended to work with the DOM directly:

  • 1) There is a demand for a reference to an item in the component’s template.
  • 2) A reference to an element a user projects into your component is required.

Error #2: Ensuring the Query Results in the Constructor

for the first time, a developer may fall into the trap described below.

Logging query in constructor (broken)
@Component({…})
export class MyComp {
@ViewChild(SomeDir) someDir: SomeDir;
constructor() {
console.log(this.someDir); // undefined
}
}

In case “undefined” log appears, you may think that the query is not functioning properly. In reality, you are just in a hurry to check the outcomes before the time comes. Don’t disturb the elements when the constructor is still executing.

Fortunately, Angular 2 latest lifecycle hooks give a clearer hint on whether you can test for each type of query.

Remember:

  • In case you’re managing a view query, the outcomes can be viewed and evaluated after the view is initialized. It is advised to apply ngAfterViewInit lifecycle hook.
  • Whenever you are working with a content query, you’ll see the results once the content is fully initialized. Apply the ngAfterContentInit lifecycle hook.

The code inserted above should then look different.

Logging query in ngAfterViewInit hook (advised)
@Component({…})
export class MyComp implements AfterViewInit {
@ViewChild(SomeDir) someDir: SomeDir;
ngAfterViewInit() {
console.log(this.someDir); // SomeDir {…}
}
}

Error #3: ngOnChanges are used to Define Query List Modifications

If you still remember, Angular 1 required its users to install a $scope.$watch and watch for modifications in hand when every digest cycle arrives. It was necessary to get warned whenever any value changed. It becomes easier in Angular 2 thanks to the magnificent ngOnChanges hook. All a developer needs are to identify an ngOnChanges technique in the listed component class. It is rather simple.

At the same time, there is always “but.” This approach executes only in case if the component’s inputs shape. In particular, we mean items that developer has added in the inputs array or named with a @Input decorator. It will not be called if the items are inserted or excluded from @ViewChildren or @ContentChildren query lists.

So, it’s better to forget about ngOnChanges for these purposes. A good tip is to subscribe to the query list’s built-in observable. Do it in the proper lifecycle hook to receive notifications.

Error #4: Constructing ngFor Improperly

Angular 2 refers to the concept of “structural directives” which control the number of elements from the DOM based upon expressions. They should be applied with respect to a template element. This new syntax may confuse users.

It is time to observe frequent Bootstrap-related mistakes now.

1. Major Misconceptions about the Framework

Several basic misconceptions about the Bootstrap framework prevent developers from working without any failures. It is often caused by the fact that users ignore reading the documentation in full.

Bootstrap cannot be called big or enormous. You will find it packed along with basic HTML and CSS design templates with typical UI components:

You must understand that Bootstrap will not do everything for you. However, you may pick one of the suggested defaults in order to think less about design issues. Developers might be interested in quick prototyping. Bootstrap developer wins as the framework has matured, and extensibility has greatly improved.

2. No Need to be Aware of CSS and Hiring Designer

Every good front-end developer needs to study at least CSS and HTML5. You cannot rely on the basic default styling because some elements will still have to be edited in CSS. First of all, it is critical to realize how responsive design works. A good start is to test source code in LESS or SASS.

When companies hire Bootstrap developers, they believe they don’t need any designers. If you want your Bootstrap site to look a bit different from the rest, use designer’s professional help. You can review some of the best designs at the Bootstrap Expo.

3. Bootstrap CSS File Modifications

A Bootstrap developer should not implement any changes to the bootstrap.css file. Otherwise, it may get too complicated further in your work. The entire design will be under the threat of breaking down during the process of upgrading Bootstrap files. It is much safer to make all changes in your personal style sheet default bootstrap colors and other elements.

There is an opportunity to develop personal CSS file and overwrite everything from the initial bootstrap.css style sheet. All you need is an excellent knowledge of CSS. Come up with fresh CSS selector to use it in the HTML. These steps will assist in overwriting Bootstrap defaults.

It would also be nice to apply Bootstrap LESS source code.

4. Trying Simply Everything from Bootstrap

Sure thing, Bootstrap is comprehensive enough. You can play with a variety of templates and JavaScript plug-ins. It’s just critical to pick only the most useful features for your project in order not to get lost.

Pretend that you miss bootstrap.js file at the beginning; establish a website with the help of plain HTML and CSS.

5. Mis-using a Modal Prompt

There is a great temptation, but there is no need to use a modal prompt for wrong goals. Bootstrap modals stand for flexible dialog prompts with the minimum required functionality. It involves attractive defaults. It is simple to use, but try to avoid typical misuses.

For instance, keep in mind that if the modal container possesses a fixed/relative position, the modal will not display correctly. Another example is dealing with modals on mobile devices with virtual keyboards: this is not handled by Bootstrap, so watch out while fixing it in the code.

6. File Input Button Element Problem

Keep in mind that Bootstrap doesn’t offer a designated component for a file upload button. A friendly and fats to implement solution based on HTML and CSS can be reached with the code below:

<span class=”btn btn-default btn-file”>
Browse <input type=”file”>
</span>
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;

7. Too much Confusion with JavaScript and missed “data-” Attributes

Often, Designers and front-end developers recall only HTML, CSS, and Bootstrap to create a website. The lack of coding knowledge may result into misused JavaScript or many other troubles. Remember that Bootstrap plug-ins are only for the markup API usage. Coming up with one line of JavaScript would not work. Bootstrap’s first-class API has to be your top priority when using plug-ins.

8. Avoiding Tools for Bootstrap Development

The result of Bootstrap team trying to automate development process is known as Bootlint, an HTML linting tool for projects. You can choose to launch it from the browser or the command line through Node.js. What is does is checking Bootstrapped web pages for most frequent mistakes. Add this tool to your toolchain to reduce the possibility of conducting mistakes. After all, there are no perfect developers.

Here you can get 10 best Bootstrap tools offering significant help for developers to customize their web designing task in a smooth way.

You may be interested in Rorschach as well. It can process several checks at a time. In case a sanity check stops, you will still receive a valuable feedback on the pull request which provides both the reason for certain error to occur and the best solution. Isn’t it great?

9. IE8 and Older Browsers

Incompatible issues may ruin your plan. Bootstrap is excellent, but only for up-to-date PC, laptop, and mobile browsers. Despite everything functions, the elder versions may display the whole picture in a wrong manner. Support involves Internet Explorer 8, 9, with a notion that many CSS3 and HTML5 features are not entirely supported by these browsers.

10. Keeping away from Top Recommended Practices

Let’s pretend you’re about making Bootstraps menu drop-down to launch on hover instead of clicking. Using CSS only to solve the problem is not the best way out. If you still want to do it, you must realize repercussions and best practices. Making it “on hover” will not fit users with touch screen devices that possess only touch events.

Angular 2 & Bootstrap Mistakes Summary

I hope this sort of manual for Angular and Bootstrap developers will help to prevent some typical mistakes. When you decide to hire Bootstrap developers, make sure they are aware of these misconceptions. By knowing these solutions, one will get most of the framework. Of course, it is important to remember that Bootstrap is not good just for every project. Dedicate time to reading the documentation. Play with the framework afterward to see if it suits you well.

To sum up:

1. Read the documentation carefully,
2. Play and experiment with the offered samples,
3. Get the basics in place,
4. Achieve better user experience,
5. Study CSS and HTML5,
6. Enjoy developing new, impressive designs.


Originally published at www.agriya.com on October 22, 2016.