Discussion :

[toztoztoze]

Bonjour,

je débute sur angular et je suis en train de développer avec mes collègues de stage une application de catalogue, voici mon problème:

j'ai ces petits boutons comme ceci dans le menu :



et je veux que quand je clic sur un de ses boutons, son background se colorie en orange, comme celui la par exemple :



comme vous pouvez le voir ici j'ai cliqué sur le bouton acceuil et il m'a ramené vers la page d'acceuil et le bouton "acceuil" son background c'est bien coloré en orange.

Maintenant je veux que quand je clic sur un des 3 boutons que j'ai affiché en haut leurs background se colorie en orange et l'autre bouton qui était séléctionner au par avant son background se colorie en noir, ainsi de suite...

voici le code de mon component.html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
	<ul class="nav sidebar-nav">
		<li class="dropdown activ"><a class="dropdown-toggle" [routerLink]="['home']" class="active" data-toggle="dropdown"><i class="fa fa-fw fa-home"></i> Accueil </a></li>
		<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-search"></i> recherche <span class="caret"></span></a>
		<ul class="dropdown-menu" role="menu">
			<li class="element"><a [routerLink]="['nonRelationEntity']"><i class="fa fa-fw fa-angle-right "></i> entités sans relations</a></li>
		</ul></li>
		<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-book"></i> catalogue <span class="caret"></span></a>
			<ul class="dropdown-menu" role="menu">
				<li class="element"><a [routerLink]="['entity']"><i class="fa fa-fw fa-angle-right "></i> entité</a></li>
				<li class="element"><a [routerLink]="['relation']"><i class="fa fa-fw fa-angle-right "></i> relation</a></li>
				<li class="element"><a [routerLink]="['gestionCatalogue']"><i class="fa fa-fw fa-angle-right "></i> gestion catalogue</a></li>
			</ul></li>
		<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-exchange-alt"></i> mapping <span class="caret"></span></a>
			<ul class="dropdown-menu" role="menu">
				<li class="element"><a [routerLink]="['profileMapping']"><i class="fa fa-fw fa-angle-right "></i> mapping des profiles</a></li>
				<li class="element"><a [routerLink]="['profile']"><i class="fa fa-fw fa-angle-right "></i> profile</a></li>
				<li class="element"><a [routerLink]="['scopeMapping']"><i class="fa fa-fw fa-angle-right "></i> mapping des scopes</a></li>
				<li class="element"><a [routerLink]="['scope']"><i class="fa fa-fw fa-angle-right "></i> scope</a></li>
			</ul></li>
		<li *ngIf="edit" class="element"><a [routerLink]="['import']"><i class="fa fa-fw fa-arrow-alt-circle-up  "></i> import</a></li>
		<li class="element"><a [routerLink]="['export']"><i class="fa fa-fw fa-arrow-alt-circle-down  "></i> export</a></li>
		<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-cogs"></i> administration <span class="caret"></span></a>
			<ul class="dropdown-menu" role="menu">
				<li class="element"><a [routerLink]="['catalog']"><i class="fa fa-fw fa-angle-right "></i> catalogue</a></li>
				<li class="element"><a [routerLink]="['mappingType']"><i class="fa fa-fw fa-angle-right "></i> type de mapping</a></li>
				<li class="element"><a [routerLink]="['mappingSystem']"><i class="fa fa-fw fa-angle-right "></i> système de mapping</a></li>
				<li class="element"><a [routerLink]="['entityType']"><i class="fa fa-fw fa-angle-right "></i> type d'entité</a></li>
				<li class="element"><a [routerLink]="['relationType']"><i class="fa fa-fw fa-angle-right "></i> type de relation</a></li>
				<li class="element"><a [routerLink]="['propertyType']"><i class="fa fa-fw fa-angle-right "></i> propriété</a></li>
				<li class="element"><a [routerLink]="['mappingContext']"><i class="fa fa-fw fa-angle-right "></i> contextes de mapping</a></li>			
				<li *ngIf="admin" class="element"><a [routerLink]="['users']"><i class="fa fa-fw fa-angle-right "></i> gestion des utilisateurs</a></li>
				<li class="element"><a [routerLink]="['version']"><i class="fa fa-fw fa-angle-right "></i> gestion de versions</a></li>	
			</ul>
		</li>
	</ul>
</div>

et voici le code de mon component.ts :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { Component } from '@angular/core';
import { RouterModule, Router, Routes } from '@angular/router';
declare var $: any;
 
@Component({
    selector: 'side-menu',
    templateUrl: './side-menu.component.html',
    styleUrls: ['./side-menu.component.css']
})
export class sideMenuComponent {
    admin : boolean = false;
    edit : boolean = true;
    ngOnInit(){
        if(localStorage.getItem('role')=="ROLE_ADMIN"){
            this.admin = true;
        }
        if(localStorage.getItem('role')=="ROLE_VIEW"){
            this.edit = false;
        }
    }
 
    ngAfterViewInit() {
        $(document).on('click', '.element', function (e) {
            $('.element.activ').toggleClass('activ');
            $(this).toggleClass('activ');
        });
 
        $(document).on('click', '.sidebar-nav li a', function (e) {
            $('.element.activ').toggleClass('activ');
        });
 
        $(document).on('click', ':not(.sidebar-nav li.open a)', function (e) {
            e.stopPropagation();
        });
/* remove if classe is active */
        $('.nav a').on('click', function () {
            $('.nav').find('.activ').removeClass('activ');
        });
    }
}

et voici mon code css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
 
 
/*.woll {
    margin-bottom: -21px;
}
 
.ssilka a{
	color:#0080C0;
}
 
.ssilka a:hover{
	color:#0080C0;
}
 
.list-group-item:last-child {
    border-radius: 0;
}
 
.list-group-item:first-child{
    border-radius: 0;
}
.side-menu{
	width: 20%;
}*/
#sidebar-wrapper { 
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  background: #222;
  height: 100%;
  width: 180pt;
  left: 180pt;
  margin-left: -180pt;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  z-index:-5;
}
#sidebar-wrapper::-webkit-scrollbar {
  display: none;
}
#sidebar-wrapper.toggled{
	left:0;
}
 
.nav .open > a { background-color: transparent; }
 
.nav .open > a:hover { background-color: transparent; }
 
.nav .open > a:focus { background-color: transparent; }
 
.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 70pt;
  width: 180pt;
}
 
.sidebar-nav li {
  display: inline-block;
  line-height: 14pt;
  position: relative;
  width: 100%;
}
 
.sidebar-nav li:before {
  -moz-transition: width 0.2s ease-in;
  -ms-transition: width 0.2s ease-in;
  -webkit-transition: width 0.2s ease-in;
  background-color: #1c1c1c;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: width 0.2s ease-in;
  transition: width 0.2s ease-in;
  width: 3pt;
  z-index: -1;
}
 
/*.sidebar-nav li:first-child a {
  background-color: #222;
  color: #ffffff;
}*/
 
.sidebar-nav li:nth-child(1):before, .sidebar-nav li:nth-child(1).open, .sidebar-nav li:nth-child(1).activ { background-color: #F55000; }
 
.sidebar-nav li:nth-child(2):before, .sidebar-nav li:nth-child(2).open, .sidebar-nav li:nth-child(2).activ { background-color: #F6590D; }
 
.sidebar-nav li:nth-child(3):before, .sidebar-nav li:nth-child(3).open, .sidebar-nav li:nth-child(3).activ  { background-color: #F7621A; }
 
.sidebar-nav li:nth-child(4):before, .sidebar-nav li:nth-child(4).open, .sidebar-nav li:nth-child(4).activ  { background-color: #F86B27; }
 
.sidebar-nav li:nth-child(5):before, .sidebar-nav li:nth-child(5).open, .sidebar-nav li:nth-child(5).activ  { background-color: #F97435; }
 
.sidebar-nav li:nth-child(6):before, .sidebar-nav li:nth-child(6).open, .sidebar-nav li:nth-child(6).activ  { background-color: #FA7D42; }
 
.sidebar-nav li:nth-child(7):before, .sidebar-nav li:nth-child(7).open, .sidebar-nav li:nth-child(7).activ  { background-color: #FB864F; }
 
.sidebar-nav li:nth-child(8):before, .sidebar-nav li:nth-child(8).open, .sidebar-nav li:nth-child(8).activ  { background-color: #FC8F5D; }
 
.sidebar-nav li:nth-child(9):before, .sidebar-nav li:nth-child(9).open, .sidebar-nav li:nth-child(9).activ  { background-color: #FD986A; }
 
.sidebar-nav li:nth-child(10):before, .sidebar-nav li:nth-child(10).open, .sidebar-nav li:nth-child(10).activ  { background-color: #FEA177; }
 
.sidebar-nav li:nth-child(11):before, .sidebar-nav li:nth-child(11).open, .sidebar-nav li:nth-child(11).activ  { background-color: #FFAB85; }
 
.sidebar-nav li:hover:before {
  -webkit-transition: width 0.2s ease-in;
  transition: width 0.2s ease-in;
  width: 100%;
}
 
.sidebar-nav li a {
  color: #dddddd;
  display: block;
  padding: 7pt 10pt 7pt 20pt;
  text-decoration: none;
}
 
.sidebar-nav li.open:hover before {
  -webkit-transition: width 0.2s ease-in;
  transition: width 0.2s ease-in;
  width: 100%;
}
 
.sidebar-nav .dropdown-menu {
  background-color: #333;
  border-radius: 0;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
 
.sidebar-nav .dropdown-menu li a{
  margin-left: 10pt;
}
 
.sidebar-nav li.open a, .sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus {
  background-color: transparent;
  color: #ffffff;
  text-decoration: none;
}
 
.sidebar-nav > .sidebar-brand {
  font-size: 14pt;
  height: 52pt;
  line-height: 30pt;
}
 
.caret{
	float: right;
}

Le problème c'est que ce code là ne marche pas sur le bouton import et export et je ne sais vraiment pas où elle est l'erreur !

J'attends votre réponse avec impatiente ! votre aide me serais vraiment très utile, et désolé si ma question est bete mais je suis toujours qu'un débutant sur ce framework.

Et merci d'avance pour votre réponse !

[krakatoa]

il faut utiliser les directives attributes

https://angular.io/guide/attribute-directives

[toztoztoze]

Oui mais pour le code je ne sais pas trop comment faire :/

[krakatoa]

réponse mode sévère :
désolé mais si tu veux devenir un bon développeur, il faut que tu apprennes par toi même.
la documentation est là !

l'apprentissage d'un framework ça prends du temps et du courage .... surtout quand on débute dans le métier

[Array Oport]

essaye de rajouter ca dans ton lien (tag A) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[routerLinkActive]="['highlightmenu']"

je sais pas si ca marchera pour toi, mais pour moi ca marche dans mes menus

[toztoztoze]

malheureusement non ça ne marche pas