Develop Reference

How to render another react component on a single button click? (Functional Component)

I am very new to React and I want to render another react component on a single click.
I have a component ListModules which has a button in it, now when I click the button another component should get rendered. I have written the below code,
module is my state and has value from the backend.
const addTimeline = () => {
return <ColorsTimeline data={module} />
}
<button type="submit" class="btn btn-success" onClick={addTimeline}>DONE</button>
Please help :)

This should work:
const[show,setShow]=useState(false);
return(
{show?<ColorsTimeline data={module} />:null}
<button type="submit" class="btn btn-success" onClick={()=>{setShow(true)}}>DONE</button>
)
Edit: if you want to hide the button once it gets clicked? Click the button, call another component and hide button! For example:
const [showButton,setShowButton]=useState(true);
return(
{show?<ColorsTimeline data={module} />:null}
{showButton?<button type="submit" class="btn btn-success" onClick={()=>{setShow(true);setShowButton(false)}}>DONE</button>:null}
)
or better do this:
return(
{show?<ColorsTimeline data={module} />:null}
{!show?<button type="submit" class="btn btn-success" onClick={()=>{setShow(true)}}>DONE</button>:null}
)

Toggle text of button with ngClass in Angular

How would I change the text of a toggled class of a button in Angular, so far I have the following to toggle the class, I am using Bootstrap:
html
<!-- toggle button -->
<button type="button" class="btn btn-primary mt-3 ml-3" (click)="status=!status;" [ngClass]="status ? 'btn-info' : 'btn-primary'" [disabled]="clicked">Primary</button>
<!-- toggle button -->
Any idea's?

Your code for ngClass is wrong and i corrected this,
Also if you want to change the text of button you can do it like this :
<button type="button" class="btn btn-primary mt-3 ml-3" (click)="status=!status;" [ngClass]="{'btn-info' : status, 'btn-primary' : !status}" [disabled]="clicked">{{status ? 'Info' : 'Primary'}}</button>

Javascript how to identify button clicked

I have a page with many articles. Each article has a delete button. How can I identify the button clicked for the article?
Currently I have this:
<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>
$('#delete-article').on('click', function(e) {
console.log('Test delete article');
});
This logs 'Test delete article' according to the number of articles on the page.

You can attach the event on button and use this object to refer the currently clicked button:
$('button').on('click', function(e) {
console.log(this.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>
<button type="button" id="delete-article-2" class="btn btn-small btn-danger">Delete</button>

You can use your event variable to get the target of the event (that is, the element responsible) and from there get its id, like this:
let btnId = event.target.id;
However, for that to work properly you should assign unique ids to your buttons. If you want to provide other data (or you don't want to use id) you can append custom attributes, like data-value or similar, and use it like this:
let myValue = event.target.getAttribute('data-value');

You need to establish relation between article and corresponding button, one way to implement is by using HTML5 data attribute.
assign data-articleId to article id in button element and when you click the button you can access which button was clicked by using Jquery .data() function.
<button type="button" data-articleId='123' class="btn btn-small btn-danger delete-article">Delete</button>
$('.delete-article').on('click', function(e) {
$(this).data('articleId'); //will return 123;
console.log('Test delete article');
});

If all the buttons have this markup
<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>
Then the DOM sees them as just one button, you should find a way to attach unique ids to your buttons

You can get an object of clicked button then you can get any details from that object like an index or whatever you want.
$('#delete-article').click(function(){
console.log($(this));
console.log($(this).index());
});

You can directly achieve it by using the JavaScript.
document.addEventListener('click',(e)=>{
console.log(e.target.id)
})
<button type="button" id="delete-article1" class="btn btn-small btn-danger">Delete1</button>
<button type="button" id="delete-article2" class="btn btn-small btn-danger">Delete2</button>
<button type="button" id="delete-article3" class="btn btn-small btn-danger">Delete3</button>
<button type="button" id="delete-article4" class="btn btn-small btn-danger">Delete4</button>
<button type="button" id="delete-article5" class="btn btn-small btn-danger">Delete5</button>
<button type="button" id="delete-article6" class="btn btn-small btn-danger">Delete6</button>
<button type="button" id="delete-article7" class="btn btn-small btn-danger">Delete7</button>

Find out if Twitter Bootstrap checkbox button has been clicked

I am new to AngularJS and could really use some help. I have a button that's shown below that is part of a form. I need to show a modal when the form is submitted if the button is not clicked. How can I perform this check? I have tried several things with no luck.
<button ng-repeat="car in cars" btn-checkbox-false
class="btn btn-default btn-block text-left"
ng-click="AddRemoveCar(cars)">
<i ng-show="carInStock(cars)"
class="fa fa-check pull-right btn-success btn btn-xs" />
<i ng-show="!carInStock(cars)"
class="fa fa-plus pull-right btn-warning btn btn-xs" />
{{car.Model}}
</button>

Consider using the UI-Bootstrap uib-btn-checkbox directive for your Twitter Bootstrap checkboxes.
The uib-btn-checkbox directive, makes a group of Twitter Bootstrap buttons behave like a set of checkboxes.
Then your submit function can check the state of the model as bound with the ng-model directive.
For more information, see
UI-Bootstrap API Reference - Buttons
The DEMO1
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.controller('ButtonsCtrl', function ($scope) {
$scope.checkModel = {
left: false,
middle: true,
right: false
};
$scope.$watchCollection('checkModel', function () {
$scope.checkResults = [];
angular.forEach($scope.checkModel, function (value, key) {
if (value) {
$scope.checkResults.push(key);
}
});
});
})
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-animate/angular-animate.js"></script>
<script src="//unpkg.com/angular-sanitize/angular-sanitize.js"></script>
<script src="//unpkg.com/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
<link href="//unpkg.com/bootstrap#3/dist/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="ui.bootstrap.demo" ng-controller="ButtonsCtrl">
<h4>Checkbox</h4>
<pre>Model: {{checkModel}}</pre>
<pre>Results: {{checkResults}}</pre>
<div class="btn-group">
<label class="btn btn-primary" ng-model="checkModel.left"
uib-btn-checkbox>Left</label>
<label class="btn btn-primary" ng-model="checkModel.middle"
uib-btn-checkbox>Middle</label>
<label class="btn btn-primary" ng-model="checkModel.right"
uib-btn-checkbox>Right</label>
</div>
</body>

I would be setting up some flag on the button click and check that value on form submit.
In my controller define a variable like btnClickedFlag = false;
In Button click function:
AddRemoveCar(cars) => {
this.btnClickedFlag = true;
}
Now on form submit , you can just check if btnClickedFlag is true if not display your modal/dialogue/overlay on screen.

Angular 2 Toggle Views On Click

I have a bootstrap card which has three different content views inside it. I am controlling the view of each of the separate data sets onclick of a link for each one. The problem is when I click a link it does not hide the previous one. I am having trouble getting the function right with typescript.
in my component.ts file
public showEquifax:boolean = true;
public showExperian:boolean = false;
public showTransunion:boolean = false;
Then in my html file
<div class="btn-group" role="group" aria-label="Credit Report Navigation">
<button (click)="showEquifax = !showEquifax" type="button" class="btn btn-secondary">Equifax Report </button>
<button (click)="showExperian = !showExperian" type="button" class="btn btn-secondary">Experian Report </button>
<button (click)="showTransunion = !showTransunion" type="button" class="btn btn-secondary">Transunion Report </button>
</div>
Based on this logic how can I change the boolean value of the functions to false when the link clicked value gets changed to true
I tried to do something like this,
public showEquifax() {
showExperian() = false;
showTransunion() = false;
return true;
}
But I get an error for left-hand side assignment expression.
How can I write each of these boolean functions to change the others to false when the current function is set to true?

What you want is: when one is shown, the other two are hidden, right? What about change your logic to something like this:
// On the class, instead of 3 booleans
private shown: string = 'EQUIFAX';
Then, the buttons would act like this:
<button (click)="shown = 'EQUIFAX'" type=="button" ...
<button (click)="shown = 'EXPERIAN'" type="button" ...
<button (click)="shown = 'TRANSUNION'" type="button" ...
Then you could show your components like this:
<div *ngIf="shown === 'EQUIFAX'">
content here
</div>
<div *ngIf="shown === 'EXPERIAN'"> ... </div>
<div *ngIf="shown === 'TRANSUNION'"> ... </div>