Here I'm Doing Angular2 Routing When i Load my Links in nva-bar Under same Html Page is also Load under please Help me How can Separate These two
<nav>
<li> <a [routerLink]="['Employee/Add']" class="btn btn-primary btn-sm">Employee</a></li>
<li> <a [routerLink]="['HrModule/Add']" class="btn btn-primary btn-sm">HrModule</a></li>
</nav>
<div>
<router-outlet>
</router-outlet>
</div>
AppComponent.ts
import { Component } from "#angular/core"
#Component({
selector:"customer-ui",
templateUrl:"../../templates/Master.html"
})
export class AppComponent {
}
Related
<img id="1" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src='assets/barrel.jpg' alt='Text dollar code part one.' />
<div id="myModal" class="modal fade" *ngIf="isModalShowing">
<div class=" modal-lg center">
<div class="modal-header">
<button type="button" class="close" (click)="toggleModal()">×</button>
<div class="modal-content">
<div class="modal-body">
<img id="1" src="assets/barrel.jpg" class="img-responsive">
<img id="2" src="assets/car.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
Above is my html, nothing happens when I click on the image that I am using as my modal trigger. This started when I add the ngIf="isModalShowing" function. Below is my typescript.
import { Component, OnInit, ViewChild } from '#angular/core';
import { NgModule } from '#angular/core';
#Component({
selector: 'app-portfolio',
templateUrl: './portfolio.component.html',
styleUrls: ['./portfolio.component.scss']
})
export class PortfolioComponent implements OnInit {
constructor() { }
public ngOnInit() {
}
isModalShowing: boolean;
toggleModal() {
this.isModalShowing = !this.isModalShowing;
}
}
This might help you as you are using pure bootstrap.
pay attention to [ngClass] in app.component.html file
I added modal-backdrop class to the class list that gives a visual indication of an active modal.
https://stackblitz.com/edit/angular-jggbzx
Or else use ng-bootstrap that has better ways of doing this
Documentation
https://ng-bootstrap.github.io/#/components/modal/examples
Running Example
https://stackblitz.com/edit/angular-dwqv1u
I have added a Navbar from Bootstrap to a React App and for some reason, it is duplicating when I render the app. Not sure what is happening. Here is the code from below is my headercomponent.
import React, { Component } from 'react';
import Navbar from './Navbar.jsx';
class HeaderName extends Component {
render() {
return (
<div>
<div>
<Navbar />
</div>
<h1>The AquaStars New Website.</h1>
<img src="../public/images/picture_swimmers.png" />
</div>
)
}
}
export default HeaderName;
Below is the Navbar.jsx component.
import React,{ Component } from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';
class Navbar extends Component {
render() {
return (
<nav className="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a className="navbar-brand" href="#">Top navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarCollapse">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Link</a>
</li>
<li className="nav-item">
<a className="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
);
}
}
export default Navbar;
Below is the index.js. This is where I think the problem is.
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import HeaderName from './components/header';
import FooterName from './components/footer';
import DescripTitle from './components/descrip';
import DescripName from './components/intro';
//create a new componet. Produce some HTML.
// const App = function() {
// return <div>Welcome to Aquastars Website</div>;
// }
const App = () => {
return (
<div>
<Router>
<div>
<Route exact path="/" component={HeaderName}/>
</div>
</Router>
<HeaderName />
<DescripName />
<DescripTitle />
<FooterName />
</div>
);
}
//Take this component's generated HTML and put it
// on the page(in the DOM).
ReactDOM.render(<App />, document.querySelector('.container'));
Any help would be appreciated.
Make sure you are not rendering the Navbar component in your app.js/index.js or wherever the headerName component is being imported. Can you post these files as well? What is inside the Navbar component. More information is needed.
-EDIT-
You can make a new Component that brings In any page contents into a "page component" then in your render:
<HeaderName/>
<Router exact path="/somedirectory" component{yourPageComponent}/>
<FooterName/>
This will make sure that header and footer are rendered on every page but only certain content is rendered on route changes. Cheers.
This my html code:
<a href="#" id="continueId" class="btn btn-success m-btn m-btn--custom m-btn--icon" data-wizard-action="next">
<span>
<span (click)="onContinue()">
continue
</span>
<i class="la la-arrow-right"> </i>
</span>
</a>
This onContinue() method:
onContinue(){
if (!this.testForm.valid) {
//here where I want to enable or disable data-wizard-action="next"
}
}
What I want is to enable or disable data-wizard-action="next" from my Angular typescript code in "onContinue()" method. If my form is not valid, so I'll disable the click of next button else, I'll enable the click. The problem here, that the continue click is attached to the data-wizard-action="next" attribute.
You can use "Angularify" like this
<div .. [attr.data-wizard-action]="next">
and
onContinue(){
this.next=!this.next
...
No more strict way to disable link button. I think you use css for disabling the link button conditionaly and then prevent the click of link button.
Try to use
<a (click)="onContinue($event)" href="javascript:void(0)" id="continueId" class="btn btn-success m-btn m-btn--custom m-btn--icon" data-wizard-action="next" [ngClass]="{'disabled-anchor': 'yourCondition'}">
<span>
<span>
continue
</span>
<i class="la la-arrow-right"> </i>
</span>
</a>
CSS
.disabled-anchor {
pointer-events: none;
cursor: default;
opacity: 0.6;
text-decoration: none;
color: black;
}
Component
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular 5';
onContinue(event: any) {
event.preventDefault();
event.stopPropagation();
if (!this.testForm.valid) {
//here where I want to enable or disable data-wizard-action="next"
}
}
}
Use *ngIf to show or hide a html element.
<div *ngIf="this.testForm.valid; then continueIdWith; else continueIdWithout"></div>
<ng-template #continueIdWith">
<a href="#" class="btn btn-success m-btn m-btn--custom m-btn--icon" data-wizard-action="next">
</ng-template>
<ng-template #continueIdWithout">
<a href="#" class="btn btn-success m-btn m-btn--custom m-btn--icon">
</ng-template>
I'm trying to make my menu load according to the click on the "Cadastros" action but I believe the problem is the "workspaceSelected" property that is not visible to all components.
I believe the correct location for this case would be the property "workspaceSelected" being in the component sidenav, but I do not know how to handle this type of situation.
I would like to click on the action "Cadastros" and she make the switch to load the correct html component.
principal component class:
export class PrincipalComponent implements OnInit {
workspaceSelecionada: string;
constructor() { }
ngOnInit() {
}
}
Principal component:
<header>
<app-navbar></app-navbar>
<app-sidenav></app-sidenav>
</header>
<div class="container" [ngSwitch]="workspaceSelecionada">
<app-cadastros *ngSwitchCase="'cadastros'"></app-cadastros>
<app-movimentacoes *ngSwitchCase="'movimentacoes'"></app-movimentacoes>
<app-administracao *ngSwitchCase="'administracao'"></app-administracao>
<app-relatorios *ngSwitchCase="'relatorios'"></app-relatorios>
<app-configuracoes *ngSwitchCase="'configuracoes'"></app-configuracoes>
<app-dashboard *ngSwitchDefault></app-dashboard>
</div>
app-sidenav:
<!--SideNav-->
<ul id="slide-out" class="side-nav grey darken-2">
<li>
<div class="userView">
<div class="background">
<img src="images/office.jpg">
</div>
<img class="circle" src="images/yuna.jpg">
<span class="white-text name">John Doe</span>
<span class="white-text email">jdandturk#gmail.com</span>
</div>
</li>
<li>
<a (click)="workspaceSelecionada = 'cadastros'" class="btn-large waves-effect waves-light indigo darken-3">CADASTROS</a>
</li>
<li>
<a class="btn-large waves-effect waves-light purple darken-3">MOVIMENTAÇÕES</a>
</li>
<li>
<a class="btn-large waves-effect waves-light orange darken-3">ADMINISTRAÇÃO</a>
</li>
<li>
<a class="btn-large waves-effect waves-light yellow darken-3">RELATÓRIOS</a>
</li>
<li>
<a class="btn-large waves-effect waves-light light-green darken-3">CONFIGURAÇÕES</a>
</li>
</ul>
<a data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
As suggested above in the comment, define a routing module for the application:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import {CadastrosComponent} from './...component';
....
const appRoutes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'cadastros', component: CadastrosComponent}
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Then import the routing module in your app module:
imports: [AppRoutingModule]
Then instead of switch case statement in your principal component, define the router outlet as below:
<router-outlet></router-outlet>
Then in the anchor tag in your side nav component template, define the router link as below:
<a routerLink="/cadastros">CADASTROS</a>
Hope this helps! Do let me know if you face any challenges implementing it.
I am using the Semantic-UI with AngularJS and I have a problem with semantic-ui menu.
In the index.html file I define the main menu:
<div class="ui inverted tiered menu">
<a class="active item" href="#/login">
<i class="sign in icon"></i> Login
</a>
<div class="ui dropdown item">
<i class="users icon"></i> TEST <i class="icon dropdown"></i>
<div class="menu">
<a class="item" href="#/test/test1"><i class="add icon"></i>Dodaj</a>
</div>
</div>
</div>
...
<div ng-view></div>
In app.js I have:
hrmApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: '/login.html',
controller: 'LoginController'
}).
when('/comment', {
templateUrl: '/test.html',
controller: 'TestController'
}).
otherwise({
redirectTo:'/login'
});
}]);
When I navigate to the site using /test/test1 then the dropdown menu works however when I navigate to the site using /login and then reload page (ctrl+r) then the dropdown menu doesnt work. What may be the cause of this problem?
I solved the problem. I have multiple controllers and ui.dropdown was initalized only in one of them using code presented below:
$('.ui.dropdown').dropdown();
Adding this code in other controllers solved it.