We Keep Coding

Angular clickOutside directive not working

I made a div which shows itself depending on a bool (called "menu"), and I wanted to make it so if the user clicks outside of it, the bool changes and therefore, the menu is hidden. I've read a post about this and I've searched a bit about it, and I found that this is already made by some users.
I've tried installing this one, creating the file myself and pasting this code, or even changing the last one to this, but it won't work and I don't know why.
The html is the following:
<!-- Menu tarea-->
<ng-container *ngIf="menu">
<div (clickOutside)="abreMenu(this.tareaMenu)" class="popup-menu">
<p>formulario here</p>
<hr>
<div>
<button (click)="borrarTarea(this.tareaMenu)"></button>
<span>Borrar</span>
</div>
</div>
</ng-container>
You don't have to worry about the "abreMenu()" function, that works just fine.
Both the new directive and the one installed are called the same, but there are no errors. I don't know if I messed the imports up but I'm getting nothing.
NOTE: This html file belongs to a component within "MyModule", which is imported in "AppModule", and there I've imported the "ClickOutsideModule" since I'd probably want to use it globally through the app.
Why isn't it working? Thanks.

Instead using the clickOutside directive you could use a HostListener inside your component:
// somewhere inside your component
#HostListener('document:click', ['$event'])
outsideClick(event: MouseEvent): void {
this.abreMenu(this.tareaMenu)
}

I just experienced this problem last week. My solution was that the directive had to be a part of the "other" module definition, because the component which used it, was contained in that other module.
I didn't try to test if the main app.module components(via the import of the other module) could access the directive, but the problem was solved for all components in that "other" module.
It's just my opinion but I think Angular has some serious issues with it's module system, not to be confused with the JavaScript module system. Angular needs to adopt the JavaScript (only) module system going forward.

Applying a dependency with javascript to Angular 2 such as bootstrap, foundation or jquery

creating this Angular 2 project I am trying to add other dependencies to the global project that incorporate js files and css files.
The css files work fine... but the javascript files seem to not to apply correctly at all.
I am attempting to do this in the root index.html file.
In the dom everything appears to be correct and there are no warning, errors or conflicts which leads me to believe it is an injection issue.
Interestingly if I apply the html to the index.html everything works fine... but adding it to any component makes it useless.
There is something I am probably doing wrong.

You need to bootstrap your external libraries' code when the component bootstraps.
For example, if you are using the bootstrap collapse on some menu items in a component, you need to call $(class).collapse() in the ngOnInit of that component( or anywhere else in the lifecycle of the component ).

navigation bar in single page app using angular

I've tried to find the answer to my problem with no luck. I'm new to web development and I've been trying to create a simple app using angularjs and bootstrap. There's no much content on my pages, only a couple of inputs and buttons that do nothing.
I placed ng-view in the index.html page as I saw in many tutorials and that allows me to navigate to all my pages. I'm trying to add a navigation bar to all my pages once a user logs in, so I placed another ng-view on my home(page after user logs in), but it seems that angular allows only one view for each app. And also it doesn't allow nested app. If I'm wrong, please correct me (that's what I understood from my Google 'research').
So, my question is: how can I add a navigation bar(or any same html content) to all my pages after the user logs in without copying the same code in each html page?
Btw, I had this working with jQuery, but I don't know how to do it using angularjs
Thanks!

You can use Angular Directive that use a template to create a custom tag and you can use a controller only for this directive. Call this tag to all pages when logging.

Why are my angular-bootstrap tabs not rendering?

Here is the site where you can view my angular app and also view source on it: http://clearsoftinc.com/dist/
There should be three blue tabs on the screen. I'm using the tabs directive from the ui-bootstrap directive for tabs (http://angular-ui.github.io/bootstrap/). I used to have it working and now for some reason its broken. I have tried for two days to fix it, with no luck.
I have also posted a zip of the source code here: http://www.clearsoftinc.com/Archive.zip

In controller.js, change
angular.module('clearsoftDemoApp', [])
to
angular.module('clearsoftDemoApp')
If 2nd parameter of module() is presented, it defines a new application instead of getting the existing one defined in app.js.

Angularjs, ng-view and custom document.ready logic

I am having a problem with angular js.
The thing is, I have bought a html template on the web which has custom javascript that is triggered on document.ready (contains a lot of code) and it does something with the GUI to set it all up and running.
As i switch my routes the the initial logic of the document.ready that was done for the elements inside the ng-view is lost and GUI looks awful.
Can someone tell me what is the best way to solve this issue?

When AngularJS changes the view/you switch your route, it will execute the associated controller-function. Therefore, you could call your initialization code from the controller.