rm *
ceci a pour effet :","theme":"E","nume":"5","sujet":3,"annee":2020},{"radio":[{"label":" d’activer une télécommande"},{"label":" d’accéder au répertoire parent du répertoire courant"},{"label":" d’effacer tous les fichiers du répertoire courant et ses sous-répertoires"},{"label":" d’effacer tous les fichiers du répertoire courant","sol":true}]}],[{"text":"Quelle commande du shell Linux permet de modifier les autorisations d'accès à un fichier ?","theme":"E","nume":"6","sujet":3,"annee":2020},{"radio":[{"label":" chmod","sol":true},{"label":" chown"},{"label":" chgrp"},{"label":" dir"}]}],[{"text":"Que peut-on dire du système de fichiers, suite à l’exécution des commandes suivantes ?
% ls
entier.py flottant.py readme.md
% mv *.py foo
% cd ..","theme":"E","nume":"6","sujet":5,"annee":2020},{"radio":[{"label":" éjecter le CD"},{"label":" copier le contenu du répertoire courant dans un répertoire caché"},{"label":" changer le répertoire courant vers le répertoire supérieur","sol":true},{"label":" supprimer le répertoire courant"}]}],[{"text":"Parmi les commandes suivantes, laquelle permet à n’importe quel utilisateur d’exécuter le fichier appelé jeu ? ","theme":"E","nume":"1","sujet":6,"annee":2020},{"radio":[{"label":" chmod u+x jeu"},{"label":" chmod u+rwx jeu"},{"label":" chmod a+x jeu","sol":true},{"label":" chmod a-x jeu"}]}],[{"text":"La commande suivante vient d'être exécutée en ligne de commande sous Linux :
cp /users/luc/interro.txt ./
Que réalise cette commande ?","theme":"E","nume":"2","sujet":6,"annee":2020},{"radio":[{"label":" copie du fichier users vers le répertoire luc"},{"label":" copie du fichier interro.txt vers le répertoire luc"},{"label":" copie du fichier interro.txt vers le répertoire courant"},{"label":" copie du fichier interro.txt vers le répertoire users","sol":true}]}],[{"text":"Que peut-on dire du système de fichier, suite à l’exécution des commandes suivantes ?
% cd
% ls
Documents Images Videos help.txt tutorial.txt script.py % mv *.txt Documents","theme":"E","nume":"3","sujet":6,"annee":2020},{"radio":[{"label":" L'utilisateur Documents a pris possession des fichiers help.txt et tutorial.txt"},{"label":" Le répertoire /Documents contient maintenant les fichiers help.txt et tutorial.txt"},{"label":" Le répertoire Documents du répertoire de l'utilisateur contient maintenant les fichiers help.txt et tutorial.txt","sol":true},{"label":" script.py a été exécuté et a déplacé les fichiers textes"}]}],[{"text":"Sous Linux, dans quel but utilise-t-on la commande cat readme.txt ? ","theme":"E","nume":"4","sujet":6,"annee":2020},{"radio":[{"label":" pour supprimer le fichier readme.txt"},{"label":" pour copier le fichier readme.txt"},{"label":" pour afficher le contenu du fichier readme.txt","sol":true},{"label":" pour renommer le fichier readme.txt"}]}],[{"text":"Une et une seule de ces affirmations est fausse. Laquelle ? ","theme":"E","nume":"6","sujet":6,"annee":2020},{"radio":[{"label":" Un système d'exploitation libre est la plupart du temps gratuit"},{"label":" Je peux contribuer à un système d'exploitation libre"},{"label":" Il est interdit d'étudier un système d'exploitation propriétaire"},{"label":" Un système d'exploitation propriétaire est plus sécurisé","sol":true}]}],[{"text":"Sous Unix, quelle commande permet de créer un nouveau répertoire ?","theme":"E","nume":"1","sujet":7,"annee":2020},{"radio":[{"label":" mkdir","sol":true},{"label":" echo"},{"label":" ls"},{"label":" rm"}]}],[{"text":"Sous Linux, les droits d'accès à un fichier dont le propriétaire est Joseph sont les suivants : -rwxr-xr--. Laquelle des affirmations suivantes est fausse ?","theme":"E","nume":"2","sujet":7,"annee":2020},{"radio":[{"label":" Joseph a l'autorisation de lire ce fichier"},{"label":" les membres du groupe de Joseph ont l'autorisation de lire ce fichier","sol":true},{"label":" tous les utilisateurs ont l'autorisation de lire ce fichier"},{"label":" les membres du groupe de Joseph ont l'autorisation de modifier ce fichier"}]}],[{"text":"Dans un terminal Linux on écrit :
user@promethee:/home/user/mesVideos $ cd ../mesPhotos
que se passe-t-il si on appuie sur la touche entrée ?","theme":"E","nume":"1","sujet":8,"annee":2020},{"radio":[{"label":" L'utilisateur sera positionné dans le répertoire /home/user/mesPhotos","sol":true},{"label":" Un nouveau dossier nommé mesPhotos sera créé dans le répertoire /home/user"},{"label":" L'utilisateur sera positionné dans le répertoire /home/user/mesVideos/mesPhotoss"},{"label":" Un nouveau dossier nommé ../mesPhotos sera créé dans le répertoire /home/user/mesVideos"}]}],[{"text":"Quel est l’effet de la commande shell suivante ?
cp NSI_ex1_Franck.txt NSI_ex1_Marie.txt","theme":"E","nume":"1","sujet":9,"annee":2020},{"radio":[{"label":" Le fichier NSI_ex1_Franck.txt est copié sous le nom NSI_ex1_Marie.txt","sol":true},{"label":" Le fichier NSI_ex1_Franck.txt est renommé sous le nom NSI_ex1_Marie.txt"},{"label":" Le fichier NSI_ex1_Marie.txt est copié sous le nom NSI_ex1_Franck.txt"},{"label":" Le fichier NSI_ex1_Marie.txt est renommé sous le nom NSI_ex1_Franck.txt"}]}],[{"text":"Quelle commande du shell Linux permet de renommer un fichier ?","theme":"E","nume":"2","sujet":9,"annee":2020},{"radio":[{"label":" cp"},{"label":" rm"},{"label":" mv","sol":true},{"label":" touch"}]}],[{"text":"Sous UNIX, que va réaliser la ligne de commande cat file.txt ? ","theme":"E","nume":"6","sujet":9,"annee":2020},{"radio":[{"label":" rien du tout"},{"label":" l'affichage du contenu du fichier file.txt dans la console","sol":true},{"label":" la création d'un fichier file.txt"},{"label":" la suppression du fichier file.txt"}]}],[{"text":"Quelle est la commande qui permet d’afficher le répertoire courant dans le shell GNU/Linux ?","theme":"E","nume":"1","sujet":11,"annee":2020},{"radio":[{"label":" mkdir"},{"label":" pwd","sol":true},{"label":" cd"},{"label":" ls -l"}]}],[{"text":"Dans un terminal sous Linux, à quoi sert la commande traceroute ? ","theme":"E","nume":"2","sujet":11,"annee":2020},{"radio":[{"label":" à afficher un itinéraire routier entre deux villes"},{"label":" c'est un synonyme pour la commande ping"},{"label":" à afficher le chemin suivi par des paquets à travers un protocole IP","sol":true},{"label":" à suivre pas à pas l'exécution d'un programme"}]}],[{"text":"Lorsque, en ligne de commande, on saisit la commande
rm *
ceci a pour effet :","theme":"E","nume":"3","sujet":11,"annee":2020},{"radio":[{"label":" d’activer une télécommande"},{"label":" d’accéder au répertoire parent du répertoire courant"},{"label":" d’effacer tous les fichiers du répertoire courant et ses sous-répertoires"},{"label":" d’effacer tous les fichiers du répertoire courant","sol":true}]}],[{"text":"Pour renommer un fichier text1.txt en text1.old dans un même répertoire, quelle commande faut-il utiliser ? ","theme":"E","nume":"4","sujet":11,"annee":2020},{"radio":[{"label":" mv text1.txt ../text1.old"},{"label":" mv text1.txt text1.old","sol":true},{"label":" cp text1.txt text1.old"},{"label":" lns text1.txt text1.old"}]}],[{"text":"Dans un terminal, on exécute la suite de commandes système suivante :
cd ~
cd seances/tp
mv exercice.txt ./../../exercice.txt
Où se trouve finalement placé le fichier exercice.txt ? ","theme":"E","nume":"6","sujet":11,"annee":2020},{"radio":[{"label":" dans le répertoire ~/seance/tp"},{"label":" dans le répertoire ~/seance"},{"label":" dans le répertoire ~"},{"label":" dans le répertoire /home","sol":true}]}],[{"text":"Dans la console Linux, quelle commande faut-il exécuter pour obtenir la documentation sur la commande pwd ? ","theme":"E","nume":"2","sujet":12,"annee":2020},{"radio":[{"label":" man pwd","sol":true},{"label":" cd pwd"},{"label":" mkdir pwd"},{"label":" ls pwd"}]}],[{"text":"Quelle est la racine du système de fichier de Linux ?","theme":"E","nume":"3","sujet":12,"annee":2020},{"radio":[{"label":"/","sol":true},{"label":" root"},{"label":" sudo"},{"label":" home"}]}],[{"text":"Lequel de ces systèmes d'exploitation est sous licence propriétaire ?","theme":"E","nume":"4","sujet":12,"annee":2020},{"radio":[{"label":" Android"},{"label":" Linux"},{"label":" Windows","sol":true},{"label":" Ubuntu"}]}],[{"text":"Quel est le rôle de la commande shell ls ? ","theme":"E","nume":"5","sujet":12,"annee":2020},{"radio":[{"label":" basculer en mode administrateur"},{"label":" lister le contenu du répertoire courant","sol":true},{"label":" donner un accès complet à un fichier"},{"label":" effacer le contenu du répertoire courant"}]}],[{"text":"Par quelle ligne de commande peut-on créer, sous le système d’exploitation Linux, trois répertoires nommés : JAVA, PYTHON et PHP ?","theme":"E","nume":"5","sujet":13,"annee":2020},{"radio":[{"label":" mkdir JAVA, PYTHON, PHP"},{"label":" mk -dir JAVA PYTHON PHP"},{"label":" mkdir JAVA PYTHON PHP","sol":true},{"label":" mk dir JAVA PYTHON PHP"}]}],[{"text":"À partir du répertoire ~/Perso/Doc quelle commande permet de rejoindre le répertoire ~/Public ? ","theme":"E","nume":"6","sujet":13,"annee":2020},{"radio":[{"label":" cd ./Public"},{"label":" cd ../Public"},{"label":" cd ././Public"},{"label":" cd ../../Public","sol":true}]}],[{"text":"Quelle commande permet de connaître le répertoire courant ?","theme":"E","nume":"1","sujet":14,"annee":2020},{"radio":[{"label":" cd"},{"label":" ls"},{"label":" pwd","sol":true},{"label":" chmod"}]}],[{"text":"Dans la console Linux, quelle commande faut-il exécuter pour obtenir la liste des répertoires et dossiers contenus dans le répertoire courant ?","theme":"E","nume":"5","sujet":14,"annee":2020},{"radio":[{"label":" man pwd"},{"label":" cd pwd"},{"label":" ls -l","sol":true},{"label":" man ls -l"}]}],[{"text":"Dans la console Linux, quelle commande faut-il exécuter pour obtenir la liste des fichiers du répertoire courant dont l'extension est jpg ?","theme":"E","nume":"6","sujet":14,"annee":2020},{"radio":[{"label":" ls -l *.jpg","sol":true},{"label":" man pwd **jpg"},{"label":" cd jpg"},{"label":" man jpg"}]}],[{"text":"Sous Unix, que fait la commande suivante :
ls –a /home/pi >> toto.txt","theme":"E","nume":"2","sujet":15,"annee":2020},{"radio":[{"label":" elle liste uniquement les répertoires cachés du répertoire /home/pi"},{"label":" elle liste tous les fichiers du répertoire /home/pi et enregistre le résultat dans un fichier toto.txt","sol":true},{"label":" elle liste tous les fichiers des répertoires de /home/pi et de toto.txt","sol":false},{"label":" elle liste tous les fichiers du répertoire courant et enregistre le résultat dans un fichier /home/pi/toto.txt"}]}],[{"text":"La commande chmod a-r monfichier ","theme":"E","nume":"3","sujet":15,"annee":2020},{"radio":[{"label":" permet à tous (all en anglais) la lecture de monfichier"},{"label":" interdit à tous (all en anglais) la lecture de monfichier","sol":true},{"label":" permet à tous (all en anglais) l'écriture dans monfichier"},{"label":" interdit à tous (all en anglais) l'écriture dans monfichier"}]}],[{"text":"Parmi ces propositions, laquelle désigne un système d'exploitation libre ?","theme":"E","nume":"4","sujet":15,"annee":2020},{"radio":[{"label":" LibreOffice"},{"label":" Windows"},{"label":" MacOS"},{"label":" GNU-Linux","sol":true}]}],[{"text":"Dans la console Linux, étant positionné dans le répertoire /home/marcelH/travail, quelle commande faut-il exécuter pour remonter dans l'arborescence vers le répertoire /home/marcelH ?","theme":"E","nume":"5","sujet":15,"annee":2020},{"radio":[{"label":" cd."},{"label":" cd ..","sol":true},{"label":" cd ..."},{"label":" cd /../."}]}],[{"text":"Parmi les systèmes d’exploitation suivants, lequel est libre ?","theme":"E","nume":"3","sujet":16,"annee":2020},{"radio":[{"label":" Mac OS"},{"label":" iOS"},{"label":" Microsoft Windows"},{"label":" GNU/Linux","sol":true}]}],[{"text":"Le répertoire personnel de l'utilisateur contient deux répertoires tempo et sauve. On souhaite déplacer le fichier bac.txt du repertoire tempo vers le répertoire sauve. Quelle commande permet de réaliser ce déplacement ?","theme":"E","nume":"3","sujet":17,"annee":2020},{"radio":[{"label":" mkdir ~/tempo/bac.txt ~/sauve"},{"label":" mkdir ~/sauve ~/tempo/bac.txt"},{"label":" mv ~/tempo/bac.txt ~/sauve","sol":true},{"label":" mv ~/sauve ~/tempo/bac.txt"}]}],[{"text":"Depuis le répertoire /home/ubuntu/ on exécute la commande mkdir ./Documents/Holidays
Quel est son effet ?","theme":"E","nume":"1","sujet":19,"annee":2020},{"radio":[{"label":" supprimer le dossier Holidays situé dans Documents"},{"label":" changer de répertoire pour se retrouver dans le répertoire /home/Documents/Holidays"},{"label":" créer un dossier Holidays dans le répertoire /home/ubuntu/Documents","sol":true},{"label":" lister le contenu du répertoire Holidays de Documents"}]}],[{"text":"Dans la console Linux, quelle commande faut-il exécuter pour effacer le fichier test0.csv ? ","theme":"E","nume":"4","sujet":19,"annee":2020},{"radio":[{"label":" rm test0.cvs","sol":true},{"label":" cp test0.csv"},{"label":" ls test0.csv"},{"label":" mv test0.csv"}]}],[{"text":"Qu'effectue-t-on en lançant la commande suivante dans un terminal Linux :
cp /etc/professeur/fichier.conf /home/nsi/fichier.conf","theme":"E","nume":"3","sujet":21,"annee":2020},{"radio":[{"label":" un déplacement de fichier"},{"label":" une copie de fichier","sol":true},{"label":" un renommage de fichier"},{"label":" un changement de répertoire"}]}],[{"text":"Dans un terminal sous Linux, quelle commande faut-il écrire pour donner à tout le monde le droit d'écriture sur un fichier information.py ?","theme":"E","nume":"4","sujet":21,"annee":2020},{"radio":[{"label":" chmod o+w information.py"},{"label":" chmod a+w information.py","sol":true},{"label":" chmod o+x information.py"},{"label":" chmod a+x information.py"}]}],[{"text":"À partir du dossier ~/Doc/QCM, quelle commande permet de rejoindre le dossier ~/Hack/Reponses ? ","theme":"E","nume":"3","sujet":24,"annee":2020},{"radio":[{"label":" cd Hack/Reponses"},{"label":" cd /Hack/Reponses"},{"label":" cd /~/Hack/Reponses"},{"label":" cd ../../Hack/Reponses","sol":true}]}],[{"text":"Lequel de ces systèmes d'exploitation est libre ?","theme":"E","nume":"6","sujet":25,"annee":2020},{"radio":[{"label":" Linux","sol":true},{"label":" Windows"},{"label":" MacOS"},{"label":" iOS"}]}],[{"text":"Dans une machine sous Linux, dans le répertoire Documents se trouvent un répertoire Final ainsi qu'un répertoire Initial contenant deux fichiers fichier1.txt et fichier2.txt.
En étant dans le répertoire Initial, quel est l’effet de la commande cp * ../Final ?","theme":"E","nume":"1","sujet":29,"annee":2020},{"radio":[{"label":" se placer dans le répertoire Final"},{"label":" déplacer dans le répertoire Initial les fichiers du répertoire Final"},{"label":" copier dans le répertoire Initial les fichiers du répertoire Final"},{"label":" copier dans le répertoire Final les fichiers du répertoire Initial","sol":true}]}],[{"text":"Sous Linux, la console indique que l'utilisateur se trouve dans le dossier /var/lib. Quelle commande doit-il exécuter pour revenir dans son dossier personnel /home/martin ?","theme":"E","nume":"4","sujet":29,"annee":2020},{"radio":[{"label":" cd~","sol":true},{"label":" cd /home","sol":false},{"label":" dir"},{"label":" dir /home/martin"}]}],[{"text":"Dans un système Linux, on dispose d'un répertoire racine contenant deux répertoires documents et sauvegardes. On se trouve dans le répertoire documents où figure un fichier NSI.txt.
Quelle commande permet de créer une copie nommée NSI2.txt de ce fichier dans le répertoire sauvegardes ? ","theme":"E","nume":"4","sujet":31,"annee":2020},{"radio":[{"label":" cp NSI.txt NSI2.txt"},{"label":" cp NSI.txt sauvegardes/NSI2.txt"},{"label":" cp NSI.txt ../NSI2.txt"},{"label":" cp NSI.txt ../sauvegardes/NSI2.txt","sol":true}]}],[{"text":"Sachant que hibou est un fichier présent dans le répertoire courant, quel est l’effet de la commande suivante : mv hibou chouette","theme":"E","nume":"1","sujet":34,"annee":2020},{"radio":[{"label":" déplacer le fichier hibou dans le répertoire chouette"},{"label":" ajouter le contenu du fichier hibou à la fin du fichier chouette "},{"label":" renommer le fichier hibou en chouette","sol":true},{"label":" créer le fichier chouette, copie du fichier hibou"}]}],[{"text":"On a exécuté la commande ls -l et obtenu l’affichage suivant :
total 0
-rw-rw-rw- 1 etudiant etudiant 15 Jul 2 13:29 exercice drwxrwxrwx 1 etudiant etudiant 512 Jul 2 13:37 seances
Que permettent d’affirmer les informations obtenues ?","theme":"E","nume":"1","sujet":35,"annee":2020},{"radio":[{"label":" exercice et seances sont deux fichiers"},{"label":" exercice est un fichier et seances est un répertoire","sol":true},{"label":" exercice et seances sont deux répertoires"},{"label":" exercice est un répertoire et seances est un fichier"}]}],[{"text":"Que permet d’effectuer la commande mkdir dans le shell d'Unix (interpréteur de commandes) ? ","theme":"E","nume":"6","sujet":38,"annee":2020},{"radio":[{"label":" créer un répertoire vide","sol":true},{"label":" créer un fichier vide"},{"label":" supprimer un répertoire cible "},{"label":" supprimer un fichier cible"}]}],[{"text":"Dans un terminal sous Linux, quelle commande permet d'afficher la liste des fichiers du répertoire courant ?","theme":"E","nume":"2","sujet":40,"annee":2020},{"radio":[{"label":" ls ","sol":true},{"label":" cd "},{"label":" mv "},{"label":" rm"}]}],[{"text":"Dans un shell sous Linux, Alice utilise la commande pwd. Cette commande :","theme":"E","nume":"6","sujet":41,"annee":2020},{"radio":[{"label":" liste les fichiers du répertoire courant"},{"label":" liste les répertoires du répertoire courant"},{"label":" affiche le chemin du répertoire courant","sol":true},{"label":" affiche les permissions relatives au répertoire courant"}]}]]
- Détails
- Écrit par : Richard GAUTHIER
- Clics : 1416
- Détails
- Écrit par : Richard GAUTHIER
- Clics : 1442
"},{"radio":[{"label":"1999","sol":true},{"label":"1979"},{"label":"2019","sol":false},{"label":"1959","sol":false}]}],[{"text":"En quelle année a été créé Google Earth?"},{"radio":[{"label":"2005","sol":true},{"label":"2015","sol":false},{"label":"1965","sol":false},{"label":"1935","sol":false}]}],[{"text":"En quelle année a été créé Street View?"},{"radio":[{"label":"2009","sol":true},{"label":"2015","sol":false},{"label":"1965","sol":false},{"label":"1935","sol":false}]}],[{"text":"Combien de satellites faut-il au minimum pour qu'un récepteur GPS fonctionne?"},{"radio":[{"label":"4","sol":true},{"label":"1","sol":false},{"label":"6","sol":false},{"label":"10","sol":false}]}],[{"text":"
"},{"radio":[{"label":"C'est une horloge atomique.","sol":true},{"label":"C'est une horloge à quartz."},{"label":"C'est une horloge à ressort.","sol":false},{"label":"C'est une horloge astronomique.","sol":false}]}],[{"text":"Quelle est la précision des horloges dans les gps?"},{"radio":[{"label":"100 nanosecondes","sol":true},{"label":"100 microsecondes","sol":false},{"label":"1 seconde","sol":false},{"label":"1 milliseconde","sol":false}]}],[{"text":"A qui appartient le système de localisation Galiléo?"},{"radio":[{"label":"A l'Europe","sol":true},{"label":"Aux Etats-Unis","sol":false},{"label":"A la Russie","sol":false},{"label":"A la Chine","sol":false}]}],[{"text":"Quelle est la vitesse de la lumière dans le vide?"},{"radio":[{"label":"300 000 000 m/s","sol":true},{"label":"300 m/s","sol":false},{"label":"300 000 m/s","sol":false},{"label":"300 000 000 000 m/s","sol":false}]}],[{"text":"Quelle est la formule pour calculer une vitesse v?"},{"radio":[{"label":"v = d * t
- Détails
- Écrit par : Richard GAUTHIER
- Clics : 1555
https://docs.google.com/presentation/d/1ImCWqUaGzUmkwtGiseBXdICXTjDrB-yTXvnqRRexD3U/edit?usp=sharing
- Détails
- Écrit par : Richard GAUTHIER
- Clics : 1217
J'ai compris
nous utilisons les cookies afin de personnaliser le contenu et les publicités, de fournir des fonctionnalités pour les réseaux sociaux et analyser notre traffic. Nous partageons également des informations sur votre usage de notre site avec nos réseaux sociaux, publicitaires et partenaires d'analyse Voir les détails
djamware fullstack programming tutorial
Programming Blog
Hire me
Resources
Home > Programming Blog > Ionic Framework
Ionic 3 and Angular 4 Multi Level Accordion Menu Example
by Didin J., updated on août 27, 2019
Ionic 3 and Angular 4 Multi Level Accordion Menu Example
An example of multi level accordion menu with dynamic data using latest Ionic 3 and Angular 4.
This is an example of a multi-level accordion menu with dynamic data using latest Ionic 3 and Angular 4. Previously we have created the simple hardcoded accordion list using Ionic 2 and Angular 2 in this tutorial.
Table of Contents:
Create New Ionic 3 and Angular 4 Side Menu App
Create Nested Array of Objects
Create and Call Service/Provider for Accessing Data
Create Multilevel Accordion Menu
Another name of Accordion is the collapsible list. The accordion is a graphical control element comprising a vertically stacked list of items, such as labels or thumbnails. Each item can be "expanded" or "collapsed" to reveal the content associated with that item. There can be zero expanded items, exactly one, or more than one item expanded at a time, depending on the configuration.
Create New Ionic 3 and Angular 4 Side Menu App
We will start this tutorial by creating new Ionic 3 and Angular 4 app. This time we will use generated side menu app. Open and edit the terminal or Node.js command line then type this command.
ionic start ionic3-accordion-menu sidemenu --v2
Or if you are using the latest Ionic CLI, type this command.
ionic start ionic3-accordion-menu sidemenu --type ionic-angular
That command will create new Ionic 3 app with the name 'ionic3-accordion-menu' using default template 'sidemenu'. Go to the newly created app folder.
cd ionic3-accordion-menu
Run the Ionic 3 app on the browser.
ionic serve -l
You should see this side menu.
Ionic 3 and Angular 4 Multi Level Accordion Menu Example - Side Menu
Right now, we will skip lazy loading pages configuration because we will focus only on the multilevel accordion menu. You can find more about lazy loading and Ionic 3 getting started here.
Create Nested Array of Objects
We have to create nested Array of objects which it's contains multilevel arrays. Create a new folder and JSON file in the asset folder.
mkdir src/assets/data
touch src/assets/data/menus.json
Open and edit 'menus.json' then add this lines of data.
[
{
"category":"PC",
"subs": [
{
"subcategory":"Processor",
"manufactures": [
{
"manufacture":"Intel"
},
{
"manufacture":"AMD"
}
]
},
{
"subcategory":"Motherboard",
"manufactures": [
{
"manufacture":"Asus"
},
{
"manufacture":"AMD"
},
{
"manufacture":"GigaByte"
},
{
"manufacture":"Intel"
}
]
},
{
"subcategory":"Memory",
"manufactures": [
{
"manufacture":"Visipro"
},
{
"manufacture":"Crucial"
},
{
"manufacture":"VenomRX"
}
]
}
]
},
{
"category":"Laptop",
"subs": [
{
"subcategory":"Notebook",
"manufactures": [
{
"manufacture":"Lenovo"
},
{
"manufacture":"Dell"
}
]
},
{
"subcategory":"Netbook",
"manufactures": [
{
"manufacture":"Lenovo"
},
{
"manufacture":"Dell"
},
{
"manufacture":"Acer"
},
{
"manufacture":"HP"
}
]
}
]
},
{
"category":"Printer",
"subs": [
{
"subcategory":"Laserjet",
"manufactures": [
{
"manufacture":"HP"
},
{
"manufacture":"Brother"
},
{
"manufacture":"Canon"
},
{
"manufacture":"Samsung"
}
]
},
{
"subcategory":"Deskjet",
"manufactures": [
{
"manufacture":"HP"
},
{
"manufacture":"Canon"
},
{
"manufacture":"Epson"
}
]
}
]
}
]
Create and Call Service/Provider for Accessing Data
To access JSON data we have to create new service or provider to keep app modular. Type this command to create it.
ionic g provider DataService
Open and edit 'src/providers/data-service.ts' add 'Response' to 'Http' import.
import { Http, Response } from "@angular/http";
Create this function for call JSON data.
getMenus(){
return this.http.get('assets/data/menus.json')
.map((response:Response)=>response.json());
}
Register this service in 'app.module.ts' by open and edit 'src/app/app.module.ts' then add this import.
import { HttpModule } from '@angular/http';
import { DataService } from '../providers/data-service';
Add 'HttpModule' in '@NgModule' imports.
...
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
...
Add 'DataService' in '@NgModule' providers.
...
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
DataService
]
...
Because menu holds by component, we have to edit it to call data for the menu from service/provider. Open and edit 'src/app/app.component.ts' then add this import.
import { DataService } from '../providers/data-service';
Replace this line.
pages: Array<{title: string, component: any}>;
With this.
pages: any;
Now, inject 'DataService' in constructor parameter and add this function for calling JSON data inside of the constructor.
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public dataService: DataService) {
this.initializeApp();
this.dataService.getMenus()
.subscribe((response)=> {
this.pages = response;
console.log(this.pages);
});
}
Create Multilevel Accordion Menu
Now, is the point. Creating multilevel Accordion Menu with Ionic 3 and Angular 4. Open and edit 'src/app/app.html' the add this lines of codes inside '<ion-content>'.
<ion-content>
<ion-list>
<ion-item *ngFor="let p of pages" text-wrap>
{{p.category}}
<ion-list>
<ion-item *ngFor="let s of p.subs" text-wrap>
{{s.subcategory}}
<ion-list>
<ion-item *ngFor="let m of s.manufactures" text-wrap>
{{m.manufacture}}
</ion-item>
</ion-list>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
</ion-content>
After we re-run the Ionic 3 app, the menu should look like this.
Ionic 3 and Angular 4 Multi Level Accordion Menu Example - Multi Level Menu
As you can see, there is 3 level of the menu. For that, we have to make accordion to hide child menus. Open and edit 'src/app/app.component.ts' then declare this variable.
showLevel1 = null;
showLevel2 = null;
Create new functions for toggle show/hide level 2 and level 3 of the menu.
toggleLevel1(idx) {
if (this.isLevel1Shown(idx)) {
this.showLevel1 = null;
} else {
this.showLevel1 = idx;
}
};
toggleLevel2(idx) {
if (this.isLevel2Shown(idx)) {
this.showLevel1 = null;
this.showLevel2 = null;
} else {
this.showLevel1 = idx;
this.showLevel2 = idx;
}
};
Also, create the function for check if level 2 and 3 is shown or hidden.
isLevel1Shown(idx) {
return this.showLevel1 === idx;
};
isLevel2Shown(idx) {
return this.showLevel2 === idx;
};
Now, open and edit 'src/app/app.html' then replace all list with this list.
<ion-content>
<ion-list>
<ion-item *ngFor="let p of pages; let i=index" text-wrap (click)="toggleLevel1('idx'+i)" [ngClass]="{active: isLevel1Shown('idx'+i)}">
<h4>
{{p.category}}
<ion-icon color="success" item-right [name]="isLevel1Shown('idx'+i) ? 'arrow-dropdown' : 'arrow-dropright'"></ion-icon>
</h4>
<ion-list *ngIf="isLevel1Shown('idx'+i)">
<ion-item *ngFor="let s of p.subs; let i2=index" text-wrap (click)="toggleLevel2('idx'+i+'idx'+i2)" [ngClass]="{active: isLevel2Shown('idx'+i+'idx'+i2)}">
<h4>
{{s.subcategory}}
<ion-icon color="success" item-right [name]="isLevel2Shown('idx'+i+'idx'+i2) ? 'arrow-dropdown' : 'arrow-dropright'"></ion-icon>
</h4>
<ion-list *ngIf="isLevel2Shown('idx'+i+'idx'+i2)">
<ion-item *ngFor="let m of s.manufactures" text-wrap>
{{m.manufacture}}
</ion-item>
</ion-list>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
</ion-content>
Then re-run the Ionic 3 app and see the results in the browser.
Ionic 3 and Angular 4 Multi Level Accordion Menu Example - Multi Level Accordion Menu
That it's for now, we are leaving this tutorial without action for click on each menu item. We know this isn't a best and simple way for creating multiple accordions. For that, we need suggestions and best algorithm to make this tutorial better and useful for everyone.
You can find the source code on our GitHub.
We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check Ionic 4 - Full Starter App and save development and design time. Android, iOS, and PWA, 100+ Screens and Components, the most complete and advance Ionic Template.
That just the basic. If you need more deep learning about Ionic, Angular, and Typescript, you can take the following cheap course:
IONIC 4 Design Hybrid Mobile Applications IOS & Android
Wordpress Rest API and Ionic 4 (Angular) App With Auth
Mobile App from Development to Deployment - IONIC 4
Ionic 4 Crash Course with Heartstone API & Angular
Ionic 4 Mega Course: Build 10 Real World Apps
Thanks.
Follow
Ezoicreport this ad
Previous Article
Step by Step Tutorial of Ionic 3, Angular 4 and Google Maps Directions Service
Next Article
Ionic 3 Google Plus Authentication Tutorial
Related Articles
Ionic 5 Tutorial: OAuth2 Login Example (Vue)
Ionic 5 Tutorial: Create Offline Price Checker (Angular 9)
Build Ionic 5 React Firebase Coronavirus Dashboard Mobile App
Ionic 5 Tutorial: Create Ionic Calculator App (Angular)
Upgrade the existing Ionic 4 app to Ionic 5 and Add New Feature
Ionic 4 Tutorial: How to Create Mobile Apps Quickly
Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples
Ionic 4 Tutorial: Facebook Login Example
Ionic 4 Tutorial: Angular 8 Multilevel Accordion Menu Example
Ionic 4 and Angular 8: Radio Button and Checkbox in FormArray
Build Android/iOS Mobile Apps using Ionic 4 React.js Capacitor
Ionic 4 Angular 8 Tutorial: Learn to Build CRUD Mobile Apps
Ionic 4 and Angular 7 Tutorial: Securing Pages using Route Guard
Ionic 4, Angular 7 and Cordova Crop and Upload Image
Push Notification using Ionic 4 and Firebase Cloud Messaging
Ionic 4 and Angular 7 Tutorial: HTTP Interceptor Example
Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps
Ionic 4, Angular 6 and Cordova: Export and View PDF File
Ionic 4 Angular 6 Tutorial: Call Multiple Services at Once
Ionic 4 and Angular 6 Tutorial: Firebase Realtime CRUD Mobile App
Programming Blog
React Native
HTML 5 Tutorial
ASP.NET Core
React.js
Vue.js
Angular
Java
Node.js
CSS 3
Javascript
Ionic Framework
MongoDB
Groovy and Grails
Flutter Tutorial
All Articles
Popular Articles:
Angular 8 Tutorial: REST API and HttpClient Examples (6366)
Angular Material Form Controls Select (mat-select) Example (4559)
Angular 8 Tutorial: Routing & Navigation Example (3726)
Angular 8 Tutorial: Observable and RXJS Examples (2920)
Flutter Tutorial: Firebase Cloud Messaging FCM Push Notification (2501)
Angular Material Form Controls, Form Field and Input Examples (2488)
Angular HttpClient (6/7/8/9/10): Consume REST API Example (2424)
Angular 10 Universal Server Side Rendering (SSR) CRUD Example (2333)
React.js Tutorial: Facebook Login Example (2045)
Push Notification using Ionic 4 and Firebase Cloud Messaging (1958)
Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly (1757)
React Native Tutorial: SQLite Offline Android/iOS Mobile App (1737)
Angular 8 Tutorial: Facebook Login (1327)
Angular 9 Tutorial: Creating Firebase Chat Web App (1313)
Ionic 4, Angular 6 and Cordova: Export and View PDF File (1248)
Ezoicreport this ad
©2012-2018 Djamware.com | Privacy Policy | About Us | Contact Us | RSS
Share to Facebook
, Number of shares
Share to Twitter
Share to Pinterest
, Number of shares13
Share to LinkedIn
Share to Reddit
, Number of shares
More AddThis Share options
, Number of shares
29
SHARES
SHARES
- Détails
- Écrit par : Richard GAUTHIER
- Clics : 3535